[flutter] ExpansionPanel 빌더 클래스의 활용 방법

07 Dec 2023

flutter

이 문서에서는 Flutter의 ExpansionPanel 빌더 클래스를 사용하여 확장 가능한 패널을 만드는 방법에 대해 설명합니다.

ExpansionPanel 빌더 클래스는 UI에서 사용자에게 제목과 내용이 있는 확장 가능한 패널을 만들기 위해 사용됩니다. 이 클래스는 ListView, Column 또는 다른 컨테이너 위젯과 함께 사용할 수 있습니다.

ExpansionPanel 빌더 클래스

ExpansionPanel 빌더 클래스는 ExpansionPanel을 생성하기 위한 빌더 역할을 합니다. ExpansionPanelList 위젯과 함께 사용됩니다.

문법은 다음과 같습니다.

ExpansionPanel(
  headerBuilder: (BuildContext context, bool isExpanded) {
    // 패널의 헤더 부분을 빌드합니다.
    // isExpanded 매개변수를 이용하여 패널이 확장되었는지 여부를 확인할 수 있습니다.
  },
  body: Container(
    // 패널의 내용 부분을 빌드합니다.
    // 일반적으로 Column, ListView 등의 위젯을 사용하여 여러 요소를 포함할 수 있습니다.
  ),
  isExpanded: // 패널의 확장 여부를 설정합니다.
);

ExpansionPanelList 사용하기

ExpansionPanelList 위젯은 ExpansionPanel들의 리스트를 렌더링합니다. ExpansionPanel 빌더 클래스를 이용하여 각 패널을 빌드하고, ExpansionPanelList 위젯에 전달해야 합니다.

다음은 ExpansionPanelList와 ExpansionPanel 빌더 클래스를 함께 사용하는 예시입니다.

class MyExpansionPanelList extends StatefulWidget {
  @override
  _MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}

class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
  List<Item> _items = generateItems();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _items.map<Widget>((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(),
    );
  }
}

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

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

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

이 예시에서는 _MyExpansionPanelListState 클래스의 build 메서드에서 _items 리스트를 사용하여 ExpansionPanelList를 빌드합니다. _items 리스트에는 각 패널의 내용이 저장됩니다. ExpansionPanel의 headerBuilder 콜백은 ListTile 위젯을 반환하는데, 이를 통해 패널의 제목을 표시할 수 있습니다.

결론

Flutter의 ExpansionPanelList 빌더 클래스를 사용하면 사용자에게 확장 가능한 패널을 제공하는 간단하고 유연한 방법을 제공합니다. UI에서 확장 가능한 영역이 필요한 경우 ExpansionPanelList를 사용해보세요.

ExpansionPanel 빌더 클래스

ExpansionPanelList 사용하기

결론

참고 자료