[flutter] ExpansionPanel의 주요 속성과 기능

07 Dec 2023

flutter

ExpansionPanel은 사용자가 터치하여 내용을 펼칠 수 있는 위젯입니다. 이 글에서는 ExpansionPanel 위젯의 주요 속성과 기능에 대해 알아보겠습니다.

ExpansionPanel의 주요 속성

headerBuilder: ExpansionPanel의 헤더 부분을 생성하는 함수입니다. 이 함수는 헤더가 펼쳐져 있는지 여부에 따라 호출됩니다.
body: ExpansionPanel이 펼쳐졌을 때 보여지는 내용입니다.
isExpanded: ExpansionPanel의 초기 상태를 설정하는 불리언 값입니다. 기본값은 false이며, 이 값에 따라 펼쳐진 상태와 닫힌 상태를 결정합니다.
canTapOnHeader: 사용자가 헤더 부분을 터치하여 ExpansionPanel을 펼칠 수 있는지 여부를 결정하는 불리언 값입니다. 기본값은 true입니다.

ExpansionPanel의 기능

ExpansionPanelList: ExpansionPanel의 리스트를 생성하는 위젯입니다. 이 위젯은 ExpansionPanel 위젯을 자동으로 관리하고, 헤더와 내용을 정의하는 방식으로 ExpansionPanel을 생성합니다.
ExpansionPanelList의 children: ExpansionPanelList 위젯의 자식으로 전달되는 ExpansionPanel 위젯들의 리스트입니다. 각 ExpansionPanel 위젯은 ExpansionPanelHeaderBuilder 함수와 body를 설정하여 생성됩니다.
ExpansionPanelList의 expansionCallback: ExpansionPanel이 펼쳐졌을 때 호출되는 콜백 함수입니다. 이 함수는 사용자가 ExpansionPanel을 펼치거나 닫을 때마다 호출됩니다.
ExpansionPanelList의 animationDuration: ExpansionPanel이 펼쳐지거나 닫힐 때의 애니메이션 지속 시간을 설정하는 Duration 객체입니다.
ExpansionPanelList의 elevation: ExpansionPanelList 위젯이 가지는 그림자의 크기를 설정하는 값입니다.

예제 코드:

ExpansionPanelList(
  elevation: 1,
  animationDuration: Duration(milliseconds: 500),
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('Header 1'),
        );
      },
      body: ListTile(
        title: Text('Expansion Panel 1'),
      ),
      isExpanded: false,
      canTapOnHeader: true,
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('Header 2'),
        );
      },
      body: ListTile(
        title: Text('Expansion Panel 2'),
      ),
      isExpanded: false,
      canTapOnHeader: true,
    ),
  ],
)

참고 문서: