ExpansionPanelList는 Flutter에서 패널을 확장하고 축소할 수 있는 위젯입니다. 이 위젯은 일반적으로 패널 헤더와 패널 내용으로 구성되어 있습니다. 패널을 확장하거나 축소할 때 기본적으로 사용되는 아이콘은 화살표로 구성되어 있습니다.
그러나 경우에 따라서 사용자 정의 아이콘을 표시하고 싶을 수도 있습니다. ExpansionPanelList에서 패널 확장/축소 아이콘을 변경하는 방법에 대해 알아보겠습니다.
아이콘 변경하기
ExpansionPanelList에서 패널을 확장하거나 축소하는 아이콘을 변경하기 위해서는 ExpansionPanelList 위젯에 대해 사용자 정의를 해야 합니다. 아래의 예제 코드를 통해 아이콘을 변경하는 방법을 살펴보겠습니다.
class CustomExpansionPanelList extends StatefulWidget {
@override
_CustomExpansionPanelListState createState() => _CustomExpansionPanelListState();
}
class _CustomExpansionPanelListState extends State<CustomExpansionPanelList> {
List<Item> _items = [
Item(headerValue: 'Panel 1', expandedValue: 'This is panel 1'),
Item(headerValue: 'Panel 2', expandedValue: 'This is panel 2'),
Item(headerValue: 'Panel 3', expandedValue: 'This is panel 3'),
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: ExpansionPanelList(
elevation: 1,
expandedHeaderPadding: EdgeInsets.all(0),
expansionCallback: (int index, bool isExpanded) {
setState(() {
_items[index].isExpanded = !isExpanded;
});
},
children: _items.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
),
isExpanded: item.isExpanded,
);
}).toList(),
),
),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
위의 예제 코드에서는 CustomExpansionPanelList라는 StatefulWidget을 생성하고, _CustomExpansionPanelListState라는 State를 정의합니다. State 클래스 내에는 패널의 확장 상태를 관리하는 리스트인 _items를 선언합니다.
build() 메소드에서는 SingleChildScrollView 안에 ExpansionPanelList를 작성합니다. expansionCallback 콜백 함수에서는 패널이 확장되었을 때와 축소되었을 때의 동작을 구현합니다. headerBuilder 콜백 함수에서는 패널 헤더의 내용을 작성하고, body에서는 패널 내용을 작성합니다.
위 예제 코드에서는 사용자 정의한 패널을 사용하면서 기본 아이콘 대신 ListTile 위젯을 사용하였습니다. 패널 확장/축소 아이콘을 ListTile의 leading 속성에 아이콘 위젯을 넣어 변경할 수 있습니다.
ListTile(
leading: Icon(
item.isExpanded ? Icons.arrow_drop_up : Icons.arrow_drop_down,
),
title: Text(item.headerValue),
),
위의 코드에서는 패널이 확장된 경우라면 “arrow_drop_up” 아이콘, 축소된 경우라면 “arrow_drop_down” 아이콘을 사용하고 있습니다.
이렇게 하면 ExpansionPanelList의 패널 확장/축소 아이콘을 원하는 대로 변경할 수 있습니다.
결론
Flutter의 ExpansionPanelList에서 패널 확장/축소 아이콘을 변경하는 방법에 대해 알아보았습니다. 위 예제 코드를 참고하여 원하는 아이콘으로 패널을 커스터마이징할 수 있습니다. Happy Coding!