ExpansionPanel은 Flutter에서 제공하는 위젯 중 하나로, 사용자가 터치하면 확장되거나 축소될 수 있는 패널을 만들 수 있습니다. 디자인적인 요소들을 커스터마이징하여 다양한 색상과 테마를 적용할 수 있습니다.

ExpansionPanel 색상 변경하기

ExpansionPanel의 색상을 변경하기 위해서는 ThemeData를 사용하여 기본 테마를 수정해야 합니다. ThemeData는 앱의 전반적인 디자인 요소를 조절하는 데 사용되며, ExpansionPanel의 헤더와 본문의 배경색을 수정할 수 있습니다.

다음은 ExpansionPanel의 헤더와 본문을 다른 배경색으로 설정하는 예제입니다:

ExpansionPanel(
  headerBuilder: (context, isExpanded) {
    return Container(
      color: isExpanded ? Colors.blue : Colors.green, // 헤더 배경색 변경
      child: ...,
    );
  },
  body: Container(
    color: Colors.white, // 본문 배경색 변경
    child: ...,
  ),
  isExpanded: ...,
);

헤더의 배경색을 변경하기 위해서는 headerBuilder를 사용하고, 본문의 배경색을 변경하기 위해서는 body을 사용합니다. 원하는 색상을 선택하여 배경색을 지정할 수 있습니다.

ExpansionPanel 테마 변경하기

ExpansionPanel의 모양과 스타일을 변경하기 위해서는 ThemeData를 사용하여 테마를 수정해야 합니다. 색상뿐만 아니라, 헤더와 본문의 폰트, 아이콘, 그림자 등을 변경할 수 있습니다.

다음은 ExpansionPanel의 아이콘과 헤더의 폰트 스타일을 수정하는 예제입니다:

Theme(
  data: ThemeData(
    accentColor: Colors.red, // 아이콘 색상 변경
    textTheme: TextTheme(
      headline6: TextStyle(
        fontSize: 20, // 헤더 폰트 크기 변경
        fontWeight: FontWeight.bold, // 헤더 폰트 굵기 변경
      ),
    ),
  ),
  child: ExpansionPanel(
    headerBuilder: (context, isExpanded) {
      return ListTile(
        title: Text('Header'),
        trailing: Icon(Icons.arrow_drop_down),
      );
    },
    body: ...,
    isExpanded: ...,
  ),
);

테마를 사용하기 위해서는 Theme 위젯으로 감싸주어야 하며, accentColor로 아이콘 색상을 변경하고 textTheme으로 헤더 폰트 스타일을 수정합니다.

결론

ExpansionPanel은 Flutter에서 간단하게 확장 및 축소 가능한 패널을 만들 수 있는 편리한 위젯입니다. 위에서 설명한 방법을 통해 다양한 색상과 테마를 적용하여 사용자 친화적인 UI를 구현할 수 있습니다.

관련 문서와 예제를 참고하면 더 많은 커스터마이징 기능을 활용할 수 있습니다.

참고문서:

• Flutter ExpansionPanel Widget
• Flutter ThemeData class
• Flutter TextTheme class