[flutter] ExpansionPanel의 패널 높이 조절 방법

07 Dec 2023

flutter

Flutter에서 ExpansionPanel을 사용하여 패널을 높이를 조절하는 방법에 대해 알아보겠습니다.

ExpansionPanel은 기본적으로 패널의 높이를 자동으로 조절합니다. 하지만 때로는 패널의 높이를 수동으로 조절해야 하는 경우가 있을 수 있습니다.

패널 높이 조절하기

ExpansionPanel의 패널 높이를 조절하는 방법은 다음과 같습니다.

ExpansionPanelList 클래스의 expansionCallback 속성을 사용하여 패널의 확장 여부를 확인합니다.
expansionCallback 콜백 함수 내에서 패널의 높이를 조절합니다.

ExpansionPanelList(
  elevation: 0,
  expandedHeaderPadding: EdgeInsets.zero,
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      _isExpanded[index] = !isExpanded;
      // 패널의 높이를 조절할 수 있는 작업 수행
    });
  },
  children: _panelListItems.map<ExpansionPanel>((PanelListItem item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(item.title),
        );
      },
      body: Container(
        height: _isExpanded[index] ? 100.0 : 0.0,
        // 패널을 확장했을 때의 높이와 축소했을 때의 높이 설정
        child: Text(item.content),
      ),
      isExpanded: _isExpanded[index],
    );
  }).toList(),
)

위의 예시 코드에서는 ExpansionPanelList를 생성하고 각 패널에 대한 정보를 _panelListItems 리스트에 저장합니다. 패널의 높이를 조절하기 위해 _isExpanded 리스트를 사용합니다. _isExpanded[index] 값에 따라 패널의 높이를 설정할 수 있습니다.

ExpansionPanel을 생성할 때 body 속성의 Container의 height 값을 패널을 확장했을 때의 높이와 축소했을 때의 높이로 설정하면 됩니다. 이 값을 _isExpanded[index]에 따라 동적으로 변경하여 패널의 높이를 조절할 수 있습니다.

이와 같이 ExpansionPanelList를 사용하여 패널의 높이를 조절할 수 있습니다. 다양한 상황에 맞게 패널의 높이를 동적으로 변경할 수 있으므로 유연하게 사용할 수 있습니다.

참고 링크: