안녕하세요! 오늘은 플러터(Flutter)의 ExpansionPanel 위젯에 대해 소개하려고 합니다. ExpansionPanel은 플러터에서 제공하는 펼침 패널 위젯으로, UI에 펼쳐지고 접힐 수 있는 기능을 제공합니다.

ExpansionPanel 위젯 이해하기

ExpansionPanel 위젯은 펼쳐지고 접힐 수 있는 패널을 만들기 위해 사용됩니다. 각 패널은 ExpansionPanelHeader와 ExpansionPanelBody로 이루어져 있습니다. ExpansionPanelHeader는 패널의 상단에 표시되며 펼침/접힘 기능을 담당합니다. ExpansionPanelBody는 패널의 내용을 담고 있는 부분입니다.

ExpansionPanelList 위젯

ExpansionPanelList 위젯은 ExpansionPanel 위젯들의 리스트로 구성된 위젯입니다. 여러 개의 ExpansionPanel 위젯을 동적으로 생성하고 관리할 수 있습니다. ExpansionPanelList 위젯은 일반적으로 ListView나 SingleChildScrollView와 함께 사용됩니다.

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      // 패널의 확장/축소 상태를 업데이트
    });
  },
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text("패널 1"),
        );
      },
      body: ListTile(
        title: Text("패널 1의 내용"),
      ),
      isExpanded: true, // 패널 초기 확장 상태
    ),
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text("패널 2"),
        );
      },
      body: ListTile(
        title: Text("패널 2의 내용"),
      ),
      isExpanded: false, // 패널 초기 접힘 상태
    ),
  ],
)

ExpansionPanel의 상태 업데이트하기

ExpansionPanelList 위젯 안에서 패널의 확장/축소 상태를 업데이트하기 위해서는 expansionCallback 콜백 함수를 사용해야 합니다. 이 콜백 함수는 외부에서 패널을 확장/축소할 때 호출되며, 인덱스와 현재 확장 상태 값을 매개 변수로 받습니다. 이 콜백 함수에서는 패널의 확장/축소 상태를 업데이트하는 로직을 작성하면 됩니다.

ExpansionPanel 커스터마이징하기

ExpansionPanel은 확장 및 접힘 상태에 따라 서로 다른 위젯을 사용할 수 있습니다. headerBuilder 매개 변수를 통해 패널의 상단을 커스터마이즈할 수 있고, body 매개 변수를 통해 패널의 내용을 커스터마이즈할 수 있습니다. 이를 통해 각 패널을 고유한 디자인과 기능으로 구성할 수 있습니다.

ExpansionPanel 사용 시 주의사항

ExpansionPanel을 사용할 때 몇 가지 주의사항이 있습니다. 첫 번째로, ExpansionPanel의 리스트가 많아질 경우 위젯의 재생성 및 렌더링이 많이 발생할 수 있으므로 성능에 영향을 줄 수 있습니다. 이를 해결하기 위해 ExpansionPanel 위젯을 ListView.builder나 ListView.separated와 같이 사용할 수도 있습니다.

두 번째로, ExpansionPanelList 위젯의 상태를 관리할 때는 StatefulWidget을 사용해야 합니다. 패널의 확장/축소 상태를 변경하기 위해 setState 함수를 사용하는 방식이기 때문입니다.

마치며

위에서 설명한 것처럼, 플러터의 ExpansionPanel 위젯은 UI에 펼침/접힘 기능을 간단하게 구현할 수 있는 매우 유용한 도구입니다. ExpansionPanelList와 함께 사용하여 각 패널을 동적으로 관리하고, 확장/축소 상태를 업데이트할 수 있습니다. 많은 종류의 앱에서 유연하게 사용할 수 있는 위젯이니, 기억해두시기 바랍니다.

참고: Flutter ExpansionPanel 클래스 문서