ExpansionPanel 위젯은 헤더와 내용을 가진 확장 가능한 패널을 생성하는 데 사용됩니다. 이 문서에서는 ExpansionPanel 위젯 내에서 헤더와 내용 위젯을 배치하는 방법에 대해 설명할 것입니다.

ExpansionPanel 헤더 및 내용 위젯 배치하기

ExpansionPanel 위젯은 각각의 패널을 생성하기 위해 ExpansionPanelHeaderBuilder 와 ExpansionPanelBodyBuilder 콜백 함수를 사용합니다. 이러한 콜백 함수를 구현하여 헤더와 내용 위젯을 반환할 수 있습니다.

아래는 ExpansionPanel 위젯을 사용하여 헤더와 내용을 배치하는 예제입니다.

ExpansionPanelList(
  expandedHeaderPadding: EdgeInsets.zero,
  elevation: 0,
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('헤더 위젯'),
          leading: Icon(Icons.header),
        );
      },
      body: Container(
        padding: EdgeInsets.all(16),
        child: Text('내용 위젯'),
      ),
      isExpanded: false,
    ),
  ],
),

위 예제에서는 ExpansionPanelList 위젯을 사용하여 한 개의 ExpansionPanel을 생성하고 있습니다. headerBuilder 콜백 함수에서는 ListTile 위젯을 반환하여 헤더 위젯을 구성하고 있고, body 에는 내용 위젯을 배치하고 있습니다.

위 코드를 실행하면 헤더 위젯이 보여지고, 헤더를 클릭하면 내용 위젯이 확장되어 표시됩니다.

결론

Flutter의 ExpansionPanel 위젯은 헤더와 내용 위젯을 배치하는데 사용됩니다. ExpansionPanelList 위젯을 사용하여 ExpansionPanel을 구성하고, headerBuilder 와 body 콜백 함수를 구현하여 헤더와 내용 위젯을 생성할 수 있습니다. 위 예제를 참고하여 ExpansionPanel을 사용해보세요.

참고 문서