[flutter] ExpansionPanel에서 아이콘 변경 및 커스터마이징 방법

07 Dec 2023

flutter

개요

Flutter에서 ExpansionPanel을 사용할 때 기본 아이콘을 변경하거나 커스터마이징하는 방법에 대해 알아보겠습니다.

ExpansionPanel 아이콘 변경하기

ExpansionPanel의 기본 아이콘은 화살표로 되어 있습니다. 하지만 우리는 이 아이콘을 원하는 다른 아이콘으로 변경할 수 있습니다.

먼저, ExpansionPanel을 사용하는 위젯을 생성합니다.
ExpansionPanelList 위젯의 children 속성을 설정합니다.
각 ExpansionPanel 위젯에서 headerBuilder 속성을 사용하여 아이콘을 변경합니다.

ExpansionPanelList(
  children: _items.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          leading: Icon( // 아이콘 변경
            isExpanded ? Icons.arrow_drop_up : Icons.arrow_drop_down,
            color: Colors.blue,
          ),
          title: Text(item.title),
        );
      },
      body: Text(item.body),
      isExpanded: item.isExpanded,
    );
  }).toList(),
  ...
)

위의 예시에서는 ExpansionPanel의 headerBuilder를 사용하여 아이콘을 변경했습니다. isExpanded 값에 따라 다른 아이콘을 보여주도록 설정했습니다.

ExpansionPanel 커스터마이징하기

ExpansionPanel을 더욱 개인화하고 싶을 때는 ExpansionPanel을 커스터마이징 할 수 있습니다. 이를 위해 ExpansionPanel을 StatelessWidget으로 감싸고 필요한 위젯들을 추가할 수 있습니다.

ExpansionPanelList(
  children: _items.map<ExpansionPanel>((Item item) {
    return CustomExpansionPanel(
      item: item,
    );
  }).toList(),
  ...
)

class CustomExpansionPanel extends StatelessWidget {
  final Item item;

  const CustomExpansionPanel({Key key, this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          leading: Icon(Icons.arrow_drop_down),
          title: Text(item.title),
        );
      },
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              item.body,
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            SizedBox(height: 10),
            RaisedButton(
              onPressed: () {
                // 버튼 클릭 이벤트
              },
              child: Text('더 보기'),
            ),
          ],
        ),
      ),
      isExpanded: item.isExpanded,
    );
  }
}

위 예시에서는 CustomExpansionPanel 위젯을 생성하여 ExpansionPanel을 커스터마이징했습니다. 추가적인 위젯들을 포함시켜 보다 자세한 내용을 표시하거나 버튼 클릭 이벤트를 추가할 수 있습니다.

마무리

위의 예시를 참고하여 Flutter의 ExpansionPanel에서 아이콘을 변경하고 커스터마이징하는 방법을 알아보았습니다. ExpansionPanel을 더욱 다양한 스타일과 동작으로 개선할 수 있으니 참고해보세요!

참고 자료

Flutter ExpansionPanel class documentation