[flutter] ExpansionPanelList의 패널 정렬 방법

07 Dec 2023

flutter

Flutter에서 ExpansionPanelList를 사용하여 패널을 만들고 정렬 방법을 지정하는 방법에 대해 알아보겠습니다.

ExpansionPanelList는 확장 가능한 패널 목록을 생성하는 데 사용되는 위젯입니다. 이 위젯은 패널의 제목과 내용을 포함하여 사용자가 확장 및 축소할 수 있는 패널 목록을 제공합니다.

패널을 정렬하는 방법은 ExpansionPanelList의 children 속성에 전달된 위젯 목록의 순서에 의해 결정됩니다. 따라서 원하는 패널의 순서대로 위젯을 정의하면 됩니다. 아래 예시 코드를 통해 패널 정렬 방법을 이해해 봅시다.

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.all(0),
  dividerColor: Colors.grey,
  animationDuration: Duration(milliseconds: 400),
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 1'),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16),
        child: Text('패널 1 내용'),
      ),
      isExpanded: false,
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 2'),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16),
        child: Text('패널 2 내용'),
      ),
      isExpanded: false,
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 3'),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16),
        child: Text('패널 3 내용'),
      ),
      isExpanded: false,
    ),
  ],
)

위 코드에서는 ExpansionPanelList의 children 속성에 각 패널의 위젯을 정의한 순서대로 넣어줍니다. 이 경우 패널 1, 패널 2, 패널 3의 순서대로 패널이 정렬됩니다.

만약 패널을 다른 순서로 정렬하고 싶다면 children 속성에 위젯을 원하는 순서대로 정의하면 됩니다. 패널의 순서는 소스 코드에서 정의한 순서대로 반영됩니다.

이와 같이 ExpansionPanelList를 사용하여 패널을 정렬할 수 있습니다. 패널의 순서를 유연하게 변경하거나 재정렬하고 싶은 경우 위젯의 순서를 변경하기만 하면 됩니다.

더 자세한 내용은 Flutter ExpansionPanelList 문서를 참고하시기 바랍니다.