[flutter] ExpansionPanel에서 내용을 동적으로 추가하고 제거하는 방법

07 Dec 2023

flutter

일반적으로 Flutter의 ExpansionPanel 위젯은 정적인 방식으로 동작하며, 초기에 세트된 패널들이 고정되어 있습니다. 하지만 때로는 사용자가 특정 이벤트에 응답하여 패널을 동적으로 추가하거나 제거해야 할 때가 있습니다. 이러한 동적인 패널을 처리하기 위해 몇 가지 접근 방법들을 살펴보겠습니다.

1. 상태 관리와 패널 추가

동적인 패널을 다루기 위해서는 상태 관리가 필요합니다. 가장 간단한 접근 방법은 StatefulWidget을 사용하여 패널 목록을 관리하는 상태를 생성하는 것입니다.

다음은 ExpansionPanel을 동적으로 추가하기 위한 간단한 예시입니다:

class MyPanel {
  String header;
  Widget body;
  bool isExpanded;

  MyPanel(this.header, this.body, this.isExpanded);
}

class MyPanelList extends StatefulWidget {
  @override
  _MyPanelListState createState() => _MyPanelListState();
}

class _MyPanelListState extends State<MyPanelList> {
  List<MyPanel> _panels = [
    MyPanel('Panel 1', Container(), false),
    MyPanel('Panel 2', Container(), false),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _panels.map((panel) {
        return ExpansionPanel(
          headerBuilder: (context, isExpanded) => ListTile(
            title: Text(panel.header),
          ),
          body: panel.body,
          isExpanded: panel.isExpanded,
          canTapOnHeader: true,
        );
      }).toList(),
    );
  }
}

위의 코드에서는 _panels라는 List를 사용하여 MyPanel 객체를 관리합니다. 각 패널은 header, body, isExpanded 세 가지 속성을 가지고 있습니다. ExpansionPanel 위젯을 만들 때, _panels에서 각 항목을 매핑하여 화면에 표시합니다. 필요에 따라 _panels에 새로운 MyPanel을 추가하여 동적으로 패널을 추가할 수 있습니다.

2. 패널 제거하기

동적으로 패널을 추가하는 것과 마찬가지로, 패널을 제거하는 것 역시 상태 관리를 통해 처리할 수 있습니다. 패널을 제거하기 위해서는 사용자의 입력을 처리하여 해당 패널을 목록에서 제거해야 합니다.

아래는 패널 제거를 위한 예시 코드입니다:

class MyPanel {
  String header;
  Widget body;
  bool isExpanded;

  MyPanel(this.header, this.body, this.isExpanded);
}

class MyPanelList extends StatefulWidget {
  @override
  _MyPanelListState createState() => _MyPanelListState();
}

class _MyPanelListState extends State<MyPanelList> {
  List<MyPanel> _panels = [
    MyPanel('Panel 1', Container(), false),
    MyPanel('Panel 2', Container(), false),
  ];

  void _removePanel(MyPanel panel) {
    setState(() {
      _panels.remove(panel);
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _panels.map((panel) {
        return ExpansionPanel(
          headerBuilder: (context, isExpanded) => ListTile(
            title: Text(panel.header),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => _removePanel(panel),
            ),
          ),
          body: panel.body,
          isExpanded: panel.isExpanded,
          canTapOnHeader: true,
        );
      }).toList(),
    );
  }
}

위의 코드에서는 _removePanel 메소드를 생성하여 사용자가 삭제 아이콘을 누를 때 해당 패널을 제거하도록 합니다. setState 함수를 사용하여 상태를 업데이트하고, ListView를 다시 그리는 방식으로 패널이 제거되었음을 화면에 표시합니다.

결론

ExpansionPanel 위젯을 활용하여 동적으로 패널을 추가하고 제거하는 방법을 알아보았습니다. 상태 관리를 통해 패널 목록을 관리하고, 사용자 입력을 처리하여 패널을 동적으로 제어할 수 있습니다. 이러한 접근 방법을 사용하여 다양한 상황에서 프로그램을 유연하게 구성할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참조하십시오.