ExpansionPanel 위젯은 화면에서 접을 수 있는 패널(Panel)을 제공하는 Flutter 위젯입니다. 이 위젯은 사용자가 터치하여 패널을 확장 또는 축소할 수 있습니다. 이번 블로그 포스트에서는 ExpansionPanel 위젯의 터치 이벤트 처리 방법에 대해 알아보겠습니다.

ExpansionPanel 위젯 개요

ExpansionPanel 위젯은 화면에 일련의 패널을 나타내고, 각 패널은 헤더(Header)와 본문(Body)으로 구성됩니다. 사용자는 각 패널의 헤더를 터치하여 해당 패널의 본문을 확장 또는 축소할 수 있습니다.

ExpansionPanel 위젯은 ExpansionPanelList 위젯과 함께 사용되어야 합니다. ExpansionPanelList 위젯은 여러 개의 ExpansionPanel을 담는 리스트(List) 역할을 합니다.

터치 이벤트 처리 방법

ExpansionPanel 위젯의 터치 이벤트 처리는 ExpansionPanelList 위젯의 expansionCallback 속성을 통해 처리할 수 있습니다. expansionCallback은 헤더가 터치되었을 때 호출되는 콜백 함수를 정의하는 속성입니다.

아래의 예제 코드를 통해 expansionCallback을 사용하는 방법을 확인해보겠습니다.

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.zero,
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('패널 1'),
        );
      },
      body: ListTile(
        title: Text('패널 1 본문'),
      ),
      isExpanded: _expandedPanel[0], // 패널의 초기 확장 여부
    ),
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('패널 2'),
        );
      },
      body: ListTile(
        title: Text('패널 2 본문'),
      ),
      isExpanded: _expandedPanel[1], // 패널의 초기 확장 여부
    ),
  ],
  expansionCallback: (int panelIndex, bool isExpanded) {
    setState(() {
      _expandedPanel[panelIndex] = !isExpanded; // 확장 여부를 반전시킴
    });
  },
)

위의 예제 코드에서는 ExpansionPanelList 위젯을 사용하여 패널을 구성하고, expansionCallback 속성을 통해 터치 이벤트를 처리하는 방법을 보여줍니다. expansionCallback 콜백 함수는 패널의 인덱스와 확장 여부를 전달 받으며, setState 메소드를 호출하여 화면을 갱신합니다. 패널의 초기 확장 여부는 _expandedPanel 리스트에서 관리되며, 터치 이벤트에 따라 값을 반전시킵니다.

마무리

이번 포스트에서는 Flutter ExpansionPanel 위젯의 터치 이벤트 처리 방법에 대해 알아보았습니다. ExpansionPanelList 위젯과 함께 사용하여 화면에서 패널을 확장 또는 축소할 수 있습니다. 이를 기반으로 다양한 화면 구성을 구현할 수 있습니다.

더 많은 정보를 얻기 위해서는 공식 Flutter Documentation을 참조하시기 바랍니다.