[flutter] ExpansionPanel에 보조 설명 추가하기

07 Dec 2023

flutter

ExpansionPanel은 사용자가 특정 항목을 확장하거나 축소할 수 있는 위젯입니다. 이 위젯은 주로 목록이나 설정 페이지에서 사용되며, 사용자들에게 중요한 정보를 제공하는 데 도움을 줍니다. 하지만, 기본적으로 ExpansionPanel은 간단한 텍스트만을 표시하므로, 보조 설명을 추가하고 싶을 때는 조금 더 작업을 해야합니다.

이 글에서는 ExpansionPanel에 보조 설명을 추가하는 방법을 알아보겠습니다.

보조 설명을 위한 ExpansionPanelListTile 작성하기

보조 설명을 추가하기 위해서는 ExpansionPanelListTile을 사용해야 합니다. ExpansionPanelListTile은 ExpansionPanel의 제목과 아이콘, 그리고 보조 설명을 모두 포함할 수 있는 커스텀 위젯입니다.

class CustomExpansionPanelListTile extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;

  CustomExpansionPanelListTile({required this.title, required this.subtitle, required this.icon});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      subtitle: Text(subtitle),
      leading: Icon(icon),
    );
  }
}

위의 코드는 ExpansionPanelListTile을 커스텀한 위젯입니다. 위젯은 제목, 보조 설명, 아이콘을 인자로 받고 ListTile을 반환합니다. 이렇게 생성된 ExpansionPanelListTile을 ExpansionPanelList의 children으로 사용하면 됩니다.

ExpansionPanelList에 보조 설명 추가하기

이제 위에서 작성한 ExpansionPanelListTile을 ExpansionPanelList에 적용해 보조 설명을 추가해보겠습니다.

class ExpansionPanelPage extends StatefulWidget {
  @override
  _ExpansionPanelPageState createState() => _ExpansionPanelPageState();
}

class _ExpansionPanelPageState extends State<ExpansionPanelPage> {
  List<Item> _items = generateItems(4);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ExpansionPanel'),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: _buildItem(),
        ),
      ),
    );
  }

  Widget _buildItem() {
    return ExpansionPanelList(
      elevation: 1,
      expandedHeaderPadding: EdgeInsets.all(0),
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _items[index].isExpanded = !isExpanded;
        });
      },
      children: _items.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return CustomExpansionPanelListTile(
              title: item.title,
              subtitle: item.subtitle,
              icon: Icons.info,
            );
          },
          body: ListTile(
            title: Text('내용'),
            subtitle: Text('상세 내용을 입력하세요.'),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

위의 코드는 ExpansionPanelList를 생성하고 보조 설명을 추가하는 예제입니다. _items 리스트는 ExpansionPanelList의 각 요소의 상태를 저장하는 데 사용됩니다. ExpansionPanelList의 생성자에서는 headerBuilder에서 CustomExpansionPanelListTile을 사용하여 보조 설명을 추가하고, body에는 내용을 입력하면 됩니다.

마무리

이제 ExpansionPanel에 보조 설명을 추가하는 방법에 대해 알아보았습니다. CustomExpansionPanelListTile을 작성하여 ExpansionPanelList에 추가함으로써 보조 설명을 쉽게 구현할 수 있습니다. 이렇게 ExpansionPanel을 활용하면 사용자에게 더 많은 정보를 제공하고, 더 유익한 경험을 제공할 수 있습니다.

참고 자료

Flutter ExpansionPanel 클래스: https://api.flutter.dev/flutter/material/ExpansionPanel-class.html