[flutter] ExpansionPanel의 특정 상태에 따른 처리 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 사용자가 펼치고 접을 수 있는 위젯입니다. 그러나 ExpansionPanel이 열린 상태에서 원하는 작업을 수행하고 싶을 때가 있습니다. 이러한 경우에는 ExpansionPanel의 상태를 추적하고 그에 따라 필요한 처리를 수행해야 합니다.

ExpansionPanel 상태 추적하기

ExpansionPanel을 사용하려면 ExpansionPanelList 위젯 안에 ExpansionPanel 위젯을 추가해야 합니다. 이때 각 ExpansionPanel에는 isExpanded라는 속성이 있으며, 이를 이용하여 상태를 추적할 수 있습니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('패널 1'),
        );
      },
      body: Container(
        // 패널 내용
      ),
      isExpanded: // 상태,
    ),
    // 다른 ExpansionPanel들
  ],
)

isExpanded 속성을 통해 ExpansionPanel의 열림과 닫힘 상태를 변경할 수 있습니다.

ExpansionPanel 상태에 따라 처리하기

ExpansionPanel의 상태에 따라 특정 작업을 수행하기 위해서는 isExpanded 값을 추적하고, 이 값이 변경될 때마다 원하는 작업을 수행해야 합니다.

bool isPanelExpanded = false;

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('패널 1'),
        );
      },
      body: Container(
        // 패널 내용
      ),
      isExpanded: isPanelExpanded,
    ),
    // 다른 ExpansionPanel들
  ],
  expansionCallback: (int panelIndex, bool isExpanded) {
    setState(() {
      isPanelExpanded = !isExpanded;
    });

    if (isPanelExpanded) {
      // 패널이 열린 상태일 때 처리할 작업
    } else {
      // 패널이 닫힌 상태일 때 처리할 작업
    }
  },
)

위 예시에서는 expansionCallback을 사용하여 패널이 열리거나 닫힐 때마다 isPanelExpanded 변수를 업데이트합니다. 그리고 상태에 따라 특정 작업을 수행할 수 있습니다. expansionCallback은 (int panelIndex, bool isExpanded)을 인자로 받습니다.

마무리

ExpansionPanel을 사용할 때 특정 상태에 따른 처리가 필요한 경우, isExpanded 속성과 expansionCallback을 활용하여 상태를 추적하고 필요한 작업을 수행할 수 있습니다. 앱의 UX를 향상시키기 위해 ExpansionPanel의 활용법을 익혀보세요.

참고: Flutter ExpansionPanel 클래스