[flutter] ExpansionPanelList의 패널 스타일 및 그림자 설정 방법

07 Dec 2023

flutter

ExpansionPanelList는 Flutter의 위젯 중 하나로, 패널들의 리스트를 제공하고 해당 패널들을 확장 및 축소할 수 있는 기능을 제공합니다. 하지만 기본적인 스타일과 그림자가 부족하다면 UI가 단조롭게 느껴질 수 있습니다.

이번 블로그 글에서는 ExpansionPanelList의 패널 스타일과 그림자를 설정하는 방법에 대해 안내하겠습니다.

1. 패널 스타일 설정하기

ExpansionPanelList의 패널 스타일을 변경하려면 ExpansionPanelList 위젯의 children 속성으로 ExpansionPanel들을 정의하는데, 이때 ExpansionPanel 위젯의 headerBuilder 속성을 사용하여 맞춤형 헤더 위젯을 생성할 수 있습니다.

ExpansionPanelList(
  elevation: 4, // 패널의 그림자 높이 설정
  expandedHeaderPadding: EdgeInsets.all(8), // 확장된 패널의 헤더 내부 여백 설정
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text("패널 1"),
        );
      },
      body: Container(
        padding: EdgeInsets.all(8),
        child: Text("패널 1의 내용"),
      ),
      isExpanded: false,
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text("패널 2"),
        );
      },
      body: Container(
        padding: EdgeInsets.all(8),
        child: Text("패널 2의 내용"),
      ),
      isExpanded: false,
    ),
  ],
)

위의 예제는 ExpansionPanelList를 사용하여 두 개의 패널을 생성하는 예시입니다. 각각의 패널은 headerBuilder 속성을 사용하여 맞춤형 헤더 위젯을 생성하고, body 속성을 사용하여 패널의 내용을 지정합니다. 패널의 스타일은 ListTile 위젯을 이용하여 지정할 수 있습니다.

2. 그림자 설정하기

ExpansionPanelList의 패널들에 그림자 효과를 추가하려면 Container 위젯을 사용하여 패널 위젯을 감싸고, decoration 속성을 사용하여 그림자를 지정할 수 있습니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text("패널 1"),
        );
      },
      body: Container(
        padding: EdgeInsets.all(8),
        child: Text("패널 1의 내용"),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.grey,
              offset: Offset(0, 2),
              blurRadius: 4,
            ),
          ],
        ),
      ),
      isExpanded: false,
    ),
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text("패널 2"),
        );
      },
      body: Container(
        padding: EdgeInsets.all(8),
        child: Text("패널 2의 내용"),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [
            BoxShadow(
              color: Colors.grey,
              offset: Offset(0, 2),
              blurRadius: 4,
            ),
          ],
        ),
      ),
      isExpanded: false,
    ),
  ],
)

위의 예제에서는 Container의 decoration 속성을 사용하여 그림자 효과를 추가했습니다. BoxDecoration을 이용하여 그림자의 색상, 위치(offset), 흐림 정도(blurRadius) 등을 설정할 수 있습니다.

마무리

이번 글에서는 ExpansionPanelList의 패널 스타일과 그림자 설정 방법에 대해 알아보았습니다. ExpansionPanelList를 사용하여 UI를 더욱 풍부하게 꾸며보세요!

더 많은 정보와 예제 코드는 Flutter 공식 문서를 참고하시기 바랍니다.