[flutter] ExpansionPanel의 헤더와 내용의 배경색 설정 방법
Flutter에서 ExpansionPanel 위젯은 헤더와 내용을 포함한 패널을 만들어주는 기능을 제공합니다. 이때, ExpansionPanel의 헤더와 내용의 배경색을 설정하고 싶다면 다음과 같은 방법을 사용할 수 있습니다.
먼저, ExpansionPanel 위젯의 헤더와 내용을 감싸는 컨테이너를 생성해야 합니다. 이 컨테이너에 적절한 배경색을 설정하여 헤더와 내용의 배경색을 변경할 수 있습니다. 예를 들어, 헤더의 배경색을 노란색으로, 내용의 배경색을 파란색으로 설정하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_expanded = !_expanded;
});
},
children: [
ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
color: Colors.yellow,
child: ListTile(
title: Text('헤더'),
),
);
},
body: Container(
color: Colors.blue,
child: ListTile(
title: Text('내용'),
),
),
isExpanded: _expanded,
),
],
)
위의 코드에서 headerBuilder와 body에 적용된 Container를 볼 수 있습니다. headerBuilder에서 헤더의 배경색을 설정하고, body에서 내용의 배경색을 설정하였습니다.
위와 같이 ExpansionPanel의 헤더와 내용의 배경색을 설정할 수 있으며, 컨테이너에는 다양한 스타일을 적용할 수 있는 속성들이 존재합니다. 필요에 따라 다른 속성을 추가하여 원하는 디자인을 만들어보세요.
이 문제에 대한 도움이 되는 자료로는 Flutter 공식 문서를 참고할 수 있습니다.