[flutter] ExpansionPanelList에서 패널 추가 및 삭제 기능 구현 방법

07 Dec 2023

flutter

소개

ExpansionPanelList는 Flutter에서 제공하는 위젯으로, 패널을 포함하는 리스트 형태의 UI를 생성할 수 있습니다. ExpansionPanelList에서 패널 추가 및 삭제 기능을 구현해야 할 때가 있는데, 이를 위한 방법을 알아보겠습니다.

패널 추가하기

새로운 패널을 ExpansionPanelList에 추가하기 위해서는 ExpansionPanelList의 리스트에 새로운 패널을 추가하고, ExpansionPanelHeaderBuilder와 ExpansionPanelListCallback을 각각 수정해야 합니다.

List<Item> _items = [
  Item(headerValue: '패널 1', contentValue: '패널1 입니다.'),
  Item(headerValue: '패널 2', contentValue: '패널2 입니다.'),
];

...

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.all(0),
  expandedAlignment: Alignment.center,
  children: _items.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(item.headerValue),
        );
      },
      body: ListTile(
        title: Text(item.contentValue),
      ),
      isExpanded: item.isExpanded,
    );
  }).toList(),
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      _items[index].isExpanded = !isExpanded;
    });
  },
);

...

void _addPanel() {
  setState(() {
    _items.add(Item(headerValue: '새로운 패널', contentValue: '새로운 패널입니다.'));
  });
}

위의 예제에서는 ExpansionPanelList의 리스트인 _items에 새로운 패널을 추가하기 위해 _addPanel 함수를 호출하고, 새로운 패널을 추가하는 로직을 작성합니다. 이때 _items 리스트의 데이터 모델 Item에 headerValue와 contentValue를 설정해 주어야 합니다.

패널 삭제하기

패널을 삭제하기 위해서는 ExpansionPanelList의 리스트에서 해당 패널을 제거하고, ExpansionPanelListCallback을 수정해야 합니다.

ExpansionPanelList(
  elevation: 1,
  expandedHeaderPadding: EdgeInsets.all(0),
  expandedAlignment: Alignment.center,
  children: _items.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(item.headerValue),
        );
      },
      body: ListTile(
        title: Text(item.contentValue),
      ),
      isExpanded: item.isExpanded,
    );
  }).toList(),
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      _items.removeAt(index);
    });
  },
);

...

void _deletePanel(int index) {
  setState(() {
    _items.removeAt(index);
  });
}

위의 예제에서는 ExpansionPanelList의 리스트인 _items에서 해당 패널을 제거하기 위해 _deletePanel 함수를 호출하고, 삭제하는 로직을 작성합니다. 삭제할 패널의 인덱스를 _deletePanel 함수에 인자로 전달하면 해당 인덱스의 패널이 제거됩니다.

결론

위의 방법을 활용하여 ExpansionPanelList에서 패널을 추가하고 삭제할 수 있습니다. ExpansionPanelList는 다양한 UI 요소와 함께 사용될 수 있으며, 적절한 로직을 추가하면 원하는 기능을 구현할 수 있습니다. 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.