flutter - FAQ 자주 묻는 내용 구현하기

 

 

FAQ는 frequently asked questions의 약자로 자주 묻는 질문들이라는 뜻이다.

요즘 앱들을 보면 FAQ를 자주 접할 수 있다.

이번엔 그걸 구현해 보겠다.

 

 

FAQList 클래스 선언하기 -> 내가 원하는 곳에 적용하기

  짧게 요약하면 이렇다

 

 

---

먼저 StatelessWidget에 선언한다

class FAQList extends StatelessWidget {
  const FAQList({super.key});

  @override
  Widget build(BuildContext context) {
    return const SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 3.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FAQItem(
              question: '여기다 질문 제목',
              answer:
                  '여기다 질문에 대한 대답',
            ),
          ],
        ),
      ),
    );
  }
}

내가 사용한 코드이다. 나는 FAQItem 안에 질문과 대답을 넣었다. 다른 걸 사용하고 싶으면 여기다 다른 걸 넣으면 된다.

더 추가하고 싶으면  FAQItem( ), 이거 뒤에 똑같이 추가해 주면 된다

 

---

 

이어서 FAQItem  선언

class FAQItem extends StatefulWidget {
  final String question;
  final String answer;

  const FAQItem({
    super.key,
    required this.question,
    required this.answer,
  });

  @override
  _FAQItemState createState() => _FAQItemState();
}

class _FAQItemState extends State<FAQItem> {
  bool isExpanded = true;

  @override
  Widget build(BuildContext context) {
    double containerWidth = MediaQuery.of(context).size.width - 32;
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      margin: const EdgeInsets.only(bottom: 15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          InkWell(
            onTap: () {
              setState(() {
                isExpanded = !isExpanded;
              });
            },
            child: Container(
              width: containerWidth,
              padding: const EdgeInsets.all(10),
              child: Text(
                widget.question,
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          if (isExpanded)
            Container(
              width: containerWidth,
              padding: const EdgeInsets.all(20),
              child: Text(widget.answer),
            ),
        ],
      ),
    );
  }
}

내가 사용한 코드인데 앞서 질문과 대답을 사용했기 때문에

 final String question; / final String answer; 선언했다.

그 후 위의 영상처럼 닫혔다 열렸다를 구현하고 싶어서 InkWell,   isExpanded을 통해 구현했다.

InkWell는 클릭되면 isExpanded 상태를 변경시키는 방식이다.

 bool isExpanded = true;  -> 나는 처음부터 펼쳐진 상태로 둠  

 

이제 원하는 곳에 FAQList(), 이걸 넣어주면 끝이다

 

---

번외 : 버튼 클릭하면 나오기

나는 버튼을 클릭하면 FAQ가 보이도록 구현했다

 

bool isFAQVisible = false; 먼저 이거를 통해 처음엔 화면에 보이지 않도록 한다.

 

 ElevatedButton(
                    onPressed: () {
                      {
                        setState(() {
                          isFAQVisible = true;
                        });
                      }
                    },
                    child: const Text('문의하기',
                        style: TextStyle(color: Colors.white)),
                  ),
                  const SizedBox(height: 40),
                  if (isFAQVisible) const FAQList(),
                ],
              ),

'문의하기' 버튼을 누르면  isFAQVisible = true; 상태가 변경되어 FAQ가 보이게 된다