[flutter] 플러터 ExpansionPanelIcon 사용 방법

플러터의 ExpansionPanelIcon 위젯은 확장 가능한 패널의 아이콘을 제공하는 위젯입니다. 이 위젯은 ExpansionPanelList 위젯과 함께 사용되어 패널을 닫거나 열 때 아이콘의 모양을 변경할 수 있습니다.

ExpansionPanelIcon 생성하기

ExpansionPanelIcon 위젯은 생성자를 사용하여 아이콘을 설정할 수 있습니다. 다음은 ExpansionPanelIcon 위젯을 생성하는 예시 코드입니다.

`dart ExpansionPanelIcon( expandedIcon: Icons.remove, // 패널이 열린 상태의 아이콘 collapsedIcon: Icons.add, // 패널이 닫힌 상태의 아이콘 ) \`

ExpansionPanelList와 함께 사용하기

ExpansionPanelList 위젯은 확장 가능한 패널을 표시하는 위젯입니다. ExpansionPanelList 위젯의 children 속성을 통해 ExpansionPanel 위젯의 리스트를 전달할 수 있습니다. 각 ExpansionPanel 위젯은 ExpansionPanelHeaderBuilder와 ExpansionPanelBodyBuilder를 사용하여 패널의 헤더와 내용을 생성합니다.

ExpansionPanelList(
  elevation: 1, // 패널 목록의 그림자 높이 설정
  expandedHeaderPadding: EdgeInsets.all(0), // 패널이 열렸을 때 헤더의 여백 설정
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      _expanded[index] = !isExpanded; // 패널이 열리거나 닫힐 때 _expanded 리스트의 값을 변경
    });
  },
  children: _data.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return ListTile(
            title: Text(item.headerValue),
          );
        },
        body: ListTile(
          title: Text(item.expandedValue),
        ),
        isExpanded: _expanded[item.index],
      );
  }).toList(),
)

ExpansionPanelIcon 위젯은 ExpansionPanelList 위젯의 ExpansionPanel 위젯의 헤더에 추가할 수 있습니다. 패널이 열린 상태인지 닫힌 상태인지에 따라 다른 아이콘이 표시됩니다.

이와 같이 ExpansionPanelIcon을 사용하여 확장 가능한 패널에 아이콘을 추가할 수 있습니다. Flutter에서 다양한 위젯을 조합하여 유연하고 효과적인 UI를 구현할 수 있습니다.


참고: