[flutter] 플러터 ExpansionPanel 위젯 사용 방법

07 Dec 2023

flutter

플러터에서 ExpansionPanel 위젯은 접혀진 상태에서 확장되는 패널을 만들어주는 유용한 위젯입니다. 이 위젯은 UI에서 리스트나 그룹을 사용자에게 축소하거나 확장하는 데 사용됩니다. 이 글에서는 플러터에서 ExpansionPanel 위젯을 사용하는 방법에 대해 알아보겠습니다.

ExpansionPanel 위젯 설치

ExpansionPanel 위젯은 기본 플러터 패키지에 포함되어 있으므로 별도의 설치 없이 사용할 수 있습니다.

ExpansionPanel 위젯 사용법

ExpansionPanel 위젯은 ExpansionPanelList 위젯과 함께 사용됩니다. ExpansionPanel 위젯은 ExpansionPanelList의 자식 위젯으로 사용되어야 합니다.

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      // 패널 상태를 변경합니다.
      data[index].isExpanded = !isExpanded;
    });
  },
  children: data.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(item.headerValue),
        );
      },
      body: ListTile(
        title: Text(item.expandedValue),
      ),
      isExpanded: item.isExpanded,
    );
  }).toList(),
)

ExpansionPanelList는 expansionCallback 콜백 함수를 제공하여 패널이 확장되는지 축소되는지에 대한 상태를 관리합니다. 각 ExpansionPanel 위젯은 headerBuilder와 body를 사용하여 헤더와 본문을 구성합니다. isExpanded 속성을 사용하여 패널의 현재 확장 상태를 지정할 수 있습니다.

ExpansionPanel 위젯 사용 예시

아래 예제는 ExpansionPanel 위젯을 사용하여 리스트의 아이템을 축소 및 확장하는 예시입니다.

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: '패널 $index',
      expandedValue: '패널 $index의 본문',
    );
  });
}

class MyExpansionPanel extends StatefulWidget {
  @override
  _MyExpansionPanelState createState() => _MyExpansionPanelState();
}

class _MyExpansionPanelState extends State<MyExpansionPanel> {
  List<Item> _data = generateItems(5);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expansion Panel 예시'),
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(16),
            child: ExpansionPanelList(
              expansionCallback: (int index, bool isExpanded) {
                setState(() {
                  _data[index].isExpanded = !isExpanded;
                });
              },
              children: _data.map<ExpansionPanel>((Item item) {
                return ExpansionPanel(
                  headerBuilder: (BuildContext context, bool isExpanded) {
                    return ListTile(
                      title: Text(item.headerValue),
                    );
                  },
                  body: ListTile(
                    title: Text(item.expandedValue),
                  ),
                  isExpanded: item.isExpanded,
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

결론

플러터에서 ExpansionPanel 위젯은 리스트나 그룹을 축소하거나 확장하기 위한 간편한 방법을 제공합니다. 위젯을 사용하여 사용자 경험을 증진시킬 수 있으며, 플러터 앱에서 공간을 절약하는 데 도움이 됩니다. 이 글을 통해 ExpansionPanel 위젯의 사용법을 익혀보세요.