Flutter의 ExpansionPanelList 위젯은 사용자가 패널을 확장하거나 축소할 수 있는 패널 목록을 제공합니다. 이 위젯은 초기에 몇 개의 패널을 확장 상태로 설정하고 싶을 때 유용합니다. 이번에는 ExpansionPanelList에서 초기에 확장된 패널을 설정하는 방법에 대해 알아보겠습니다.

ExpansionPanelList과 ExpansionPanel

ExpansionPanelList는 여러 개의 ExpansionPanel 위젯을 가지는 위젯입니다. 각 ExpansionPanel은 헤더와 본문 위젯으로 구성되어 있습니다. 헤더는 사용자가 탭하여 패널을 확장하거나 축소할 수 있게 해주고, 본문은 확장된 상태에서 보여집니다.

초기에 확장된 패널을 설정하는 방법

ExpansionPanelList에서 초기에 확장된 패널을 설정하려면, ExpansionPanelList 위젯의 children 리스트에 ExpansionPanel 위젯을 추가하면 됩니다. ExpansionPanel 위젯의 isExpanded 속성을 true로 설정하여 해당 패널을 초기에 확장된 상태로 설정할 수 있습니다.

아래는 ExpansionPanelList에서 초기에 두 개의 패널을 확장된 상태로 설정하는 예제 코드입니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 1'),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Text('패널 1의 본문입니다.'),
      ),
      isExpanded: true, // 첫 번째 패널을 확장된 상태로 설정
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 2'),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Text('패널 2의 본문입니다.'),
      ),
      isExpanded: true, // 두 번째 패널을 확장된 상태로 설정
    ),
  ],
)

위 코드에서 isExpanded 속성을 true로 설정하여 첫 번째와 두 번째 패널을 초기에 확장된 상태로 설정했습니다.

이제 ExpansionPanelList를 빌드하여 화면에서 확인해볼 수 있습니다.

결론

Flutter의 ExpansionPanelList를 사용하여 초기에 확장된 패널을 설정하는 방법에 대해 알아보았습니다. ExpansionPanel 위젯의 isExpanded 속성을 사용하여 각 패널을 확장된 상태로 설정할 수 있습니다. 이를 통해 사용자의 경험을 향상시킬 수 있습니다.

참고: Flutter - ExpansionPanelList