ExpansionPanel은 Flutter에서 아코디언 스타일의 패널을 구현하는 위젯입니다. 기본적으로 패널은 연다 닫을 수 있는 기능을 가지고 있지만, 때로는 앱의 요구에 따라 패널을 숨기거나 보이는 처리를 해야 할 때가 있습니다.

이 글에서는 ExpansionPanel의 패널을 숨기고 보이는 처리 방법에 대해 알아보겠습니다.

1. ExpansionPanelList 관리

ExpansionPanel의 패널 숨기기 및 보이기는 ExpansionPanelList를 통해 관리됩니다. ExpansionPanelList는 ExpansionPanel을 여러 개 포함하는 위젯으로, 패널의 헤더와 바디를 정의하고 패널의 상태를 관리합니다.

2. ExpansionPanel의 상태 변경

ExpansionPanel의 상태는 isExpanded라는 속성을 통해 제어됩니다. 이 속성을 true로 설정하면 패널이 열리고, false로 설정하면 패널이 닫힙니다.

따라서, 패널을 숨기기 위해서는 해당 패널의 isExpanded 값을 false로 설정하면 됩니다. 마찬가지로, 패널을 보이기 위해서는 해당 패널의 isExpanded 값을 true로 설정하면 됩니다.

3. ExpansionPanelList의 상태 변경

ExpansionPanelList의 상태를 변경하려면 패널의 isExpanded 값을 업데이트해야 합니다. 이를 위해 ExpansionPanelList를 관리하는 StatefulWidget을 만들고, 해당 위젯에서 패널의 상태를 변경하는 메소드를 구현합니다.

class MyExpansionPanelListWidget extends StatefulWidget {
  @override
  _MyExpansionPanelListWidgetState createState() =>
      _MyExpansionPanelListWidgetState();
}

class _MyExpansionPanelListWidgetState extends State<MyExpansionPanelListWidget> {
  List<Item> _items = [
    Item(headerValue: '패널 1', bodyValue: '패널 1 내용'),
    Item(headerValue: '패널 2', bodyValue: '패널 2 내용'),
    Item(headerValue: '패널 3', bodyValue: '패널 3 내용'),
  ];

  @override
  Widget build(BuildContext context) {
    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 ListTile(
              title: Text(item.headerValue),
            );
          },
          body: ListTile(
            title: Text(item.bodyValue),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

위의 코드에서는 _items 리스트에 각 패널의 상태 정보를 저장하고, 클릭 이벤트 발생 시 해당 패널의 상태를 업데이트하고 화면을 다시 그리도록 합니다. 패널의 헤더와 바디는 ExpansionPanelList의 children 속성에서 생성하여 추가합니다.

4. 스크롤 가능한 ExpansionPanelList

만약 ExpansionPanelList가 스크롤이 가능한 형태로 사용되어야 한다면, ListView 같은 스크롤 가능한 위젯으로 ExpansionPanelList를 감싸야 합니다. 예를 들면, SingleChildScrollView나 ListView.builder 등의 위젯을 사용할 수 있습니다.

SingleChildScrollView(
  child: MyExpansionPanelListWidget(),
),

결론

이렇게 ExpansionPanel의 패널을 숨기고 보이는 처리를 할 수 있습니다. ExpansionPanel의 isExpanded 속성을 이용하여 패널의 상태를 변경하고, ExpansionPanelList를 관리하는 StatefulWidget을 통해 패널의 상태를 업데이트합니다.