[flutter] ExpansionPanel의 헤더 커스터마이징 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 사용자가 헤더를 탭하면 내용이 펼쳐지거나 접히는 위젯입니다. 이 위젯을 사용하면 효과적으로 확장 가능한 리스트를 만들 수 있습니다. 그러나 기본 제공 스타일이나 레이아웃이 원하는 대로 맞지 않을 수 있습니다.

이 글에서는 ExpansionPanel의 헤더를 커스터마이징하는 방법을 살펴보겠습니다.

단계 1: ExpansionPanelList 생성

먼저 ExpansionPanelList 위젯을 생성해야 합니다. 이 위젯은 ExpansionPanel의 목록을 보여주고 관리합니다. 다음은 기본적인 ExpansionPanelList 예제입니다:

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.all(0),
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      //상태 변경
    });
  },
  children: [
    //ExpansionPanel 위젯들
  ],
)

children 속성에는 ExpansionPanel 위젯들을 넣어야 합니다.

단계 2: ExpansionPanel 위젯 생성

이제 ExpansionPanel을 생성합니다. 이 위젯은 헤더와 내용을 포함하고 있습니다. 커스터마이징할 헤더를 만들기 위해 headerBuilder 속성을 사용해야 합니다. 다음은 ExpansionPanel의 예제입니다:

ExpansionPanel(
  headerBuilder: (BuildContext context, bool isExpanded) {
    return Container(
      //헤더 컨테이너 스타일
    );
  },
  body: Container(
    //내용 컨테이너 스타일
  ),
  isExpanded: //확장 여부
)

headerBuilder 속성에는 헤더 위젯을 반환하는 함수를 작성합니다. 이 함수에서 헤더의 모양과 레이아웃을 원하는대로 커스터마이징할 수 있습니다.

예제

다음은 ExpansionPanelList의 헤더를 커스터마이징하는 예제입니다:

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.all(0),
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      //상태 변경
    });
  },
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return Container(
          padding: EdgeInsets.all(16),
          child: Text(
            "헤더",
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        );
      },
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text("내용"),
      ),
      isExpanded: //확장 여부
    ),
    //더 많은 ExpansionPanel 위젯들
  ],
)

위 예제에서는 headerBuilder 함수에서 헤더의 스타일을 설정했습니다. 이로써 ExpansionPanel의 헤더를 원하는대로 커스터마이징할 수 있습니다.

결론

이번에는 Flutter의 ExpansionPanel 위젯에서 헤더를 커스터마이징하는 방법에 대해 알아보았습니다. 이를 활용하면 ExpansionPanel의 외관을 쉽게 변경할 수 있습니다. 저희가 제공한 예제를 참고하여 원하는대로 헤더를 디자인해보세요!