[flutter] ExpansionPanelList에서 패널 순서 변경 방법

07 Dec 2023

flutter

ExpansionPanelList 위젯은 확장 가능한 패널을 표시하는 데 사용되는 유용한 위젯입니다. 기본적으로 패널은 리스트의 순서에 따라 표시됩니다. 그러나 때로는 패널의 순서를 변경해야 할 수도 있습니다. 이 문서에서는 ExpansionPanelList에서 패널의 순서를 변경하는 방법을 알아보겠습니다.

패널 순서 변경 방법

ExpansionPanelList 위젯에서 패널의 순서를 변경하려면 패널의 데이터를 업데이트하고 다시 그리는 방법을 사용해야 합니다. 다음은 패널 순서를 변경하는 예제 코드입니다.

import 'package:flutter/material.dart';

class PanelItem {
  PanelItem({required this.header, required this.body, this.isExpanded = false});

  String header;
  String body;
  bool isExpanded;
}

class PanelListScreen extends StatefulWidget {
  @override
  _PanelListScreenState createState() => _PanelListScreenState();
}

class _PanelListScreenState extends State<PanelListScreen> {
  List<PanelItem> _panelItems = [
    PanelItem(header: '패널 1', body: '패널 1의 내용'),
    PanelItem(header: '패널 2', body: '패널 2의 내용'),
    PanelItem(header: '패널 3', body: '패널 3의 내용'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expansion Panel List'),
      ),
      body: ListView(
        children: _panelItems.map((panel) {
          return ExpansionPanelList(
            elevation: 1,
            expandedHeaderPadding: EdgeInsets.all(0),
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                panel.isExpanded = !isExpanded;
              });
            },
            children: [
              ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: Text(panel.header),
                  );
                },
                body: ListTile(
                  title: Text(panel.body),
                ),
                isExpanded: panel.isExpanded,
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: PanelListScreen(),
  ));
}

위의 코드에서는 PanelItem 클래스를 사용하여 각 패널의 데이터를 유지하고 있습니다. _panelItems 리스트에 패널들의 순서를 지정하고, ExpansionPanelList 위젯을 구성할 때 _panelItems 리스트를 map 메서드로 반복하면서 패널들을 생성합니다.

expansionCallback 콜백 함수에서는 패널의 확장 여부를 업데이트하고 다시 그리도록 상태를 업데이트합니다. 이를 통해 패널의 순서를 변경할 수 있습니다.

예제 코드를 실행하면 패널의 순서를 변경할 수 있는 ExpansionPanelList가 표시됩니다.

결론

ExpansionPanelList 위젯에서 패널의 순서를 변경하는 방법을 알아보았습니다. 패널의 순서를 변경하기 위해서는 패널의 데이터를 업데이트하고 다시 그리는 방식을 사용해야 합니다. 이를 통해 원하는 순서로 패널을 표시할 수 있습니다.