[flutter] ExpansionPanel에서 패널 간 간격 조절 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 패널을 확장하고 축소할 수 있는 위젯입니다. 하지만 기본적으로 ExpansionPanel 위젯은 패널 간에 간격을 제공하지 않습니다. 만약 패널 간의 간격을 조절하고 싶다면 몇 가지 방법을 이용할 수 있습니다.

1. SizedBox를 이용하여 간격 추가하기

SizedBox 위젯을 이용하여 ExpansionPanel 위젯을 감싸고 간격을 추가할 수 있습니다. 아래는 ExpansionPanel 위젯에 SizedBox를 추가하여 패널 간의 간격을 조절하는 예시입니다.

    ExpansionPanelList(
      elevation: 2,
      expandedHeaderPadding: EdgeInsets.zero,
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _expandedItems[index] = !isExpanded;
        });
      },
      children: _panelItems.map<ExpansionPanel>((PanelItem item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: ListTile(
            title: Text(item.expandedValue),
          ),
          isExpanded: _expandedItems[item.id],
        );
      }).toList(),
    )

위 코드에서 패널 간의 간격을 조절하기 위해 ExpansionPanel 위젯을 SizedBox로 감싼 것을 볼 수 있습니다. SizedBox의 height 속성을 조절하여 원하는 패널 간격을 설정하면 됩니다.

2. Divider 위젯을 이용하여 간격 추가하기

Divider 위젯을 이용하여 ExpansionPanel 위젯을 감싸고 패널 간의 간격을 추가할 수도 있습니다. 아래는 ExpansionPanel 위젯을 Divider로 감싸고 간격을 조절하는 예시입니다.

    ExpansionPanelList(
      elevation: 2,
      expandedHeaderPadding: EdgeInsets.zero,
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _expandedItems[index] = !isExpanded;
        });
      },
      children: _panelItems.map<ExpansionPanel>((PanelItem item) {
        return Divider(
          thickness: 1,
          height: 10,
          color: Colors.transparent,
          child: ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: ListTile(
              title: Text(item.expandedValue),
            ),
            isExpanded: _expandedItems[item.id],
          ),
        );
      }).toList(),
    )

위 코드에서는 Divider 위젯을 이용하여 ExpansionPanel 위젯을 감싸고 간격을 조절했습니다. Divider 위젯의 height 속성을 조절하여 패널 간격을 설정할 수 있습니다. 색상을 변경하지 않기 위해 color 속성을 transparent로 설정하였습니다.

위의 두 가지 방법을 이용하여 ExpansionPanel에서 패널 간 간격을 조절할 수 있습니다. 자신에게 가장 편한 방법을 선택하여 사용해보세요.

참고: Flutter Documentation