Flutter에서 ExpansionPanelList로 확장 가능한 목록 구현하기

728x90

Flutter에서는 사용자가 리스트의 각 항목을 클릭하여 확장하고 축소할 수 있는 ExpansionPanelList라는 위젯을 제공합니다. 이 위젯은 특히 긴 정보를 축약하여 깔끔하게 보여주고, 사용자가 필요할 때 관련 정보를 확장해서 볼 수 있게 할 때 유용합니다. 이 글에서는 ExpansionPanelList의 기본 사용법과 이를 활용한 Flutter 애플리케이션 구현 방법에 대해 알아보겠습니다.

1. ExpansionPanelList란?

ExpansionPanelList는 Flutter에서 제공하는 위젯으로, 리스트 아이템들을 확장하거나 축소할 수 있는 기능을 제공합니다. 각 항목은 확장 시 더 많은 내용을 표시하고, 축소 시에는 기본 정보만 보여주는 형식으로 동작합니다. 이를 통해 복잡한 내용을 간결하게 관리하면서, 사용자가 필요한 정보만을 선택적으로 볼 수 있게 됩니다.

주요 특징은 다음과 같습니다.

간결한 UI 제공: 많은 양의 정보를 컴팩트하게 제공할 수 있습니다.
클릭 시 확장: 사용자가 터치 또는 클릭을 통해 항목을 확장하거나 축소할 수 있습니다.
커스터마이징 가능: 각 패널의 헤더 및 본문 디자인을 자유롭게 설정할 수 있습니다.

2. ExpansionPanelList의 기본 구조

ExpansionPanelList는 각 항목을 ExpansionPanel로 감싸고, 이 패널들이 여러 개 모여 하나의 리스트를 구성합니다. 이를 위해 두 가지 필수 요소가 필요합니다.

ExpansionPanelList: 전체 패널 리스트를 감싸는 위젯
ExpansionPanel: 확장 및 축소가 가능한 개별 패널

간단한 ExpansionPanelList의 코드 구조는 다음과 같습니다.

class MyExpansionPanelList extends StatefulWidget {
  @override
  _MyExpansionPanelListState createState() => _MyExpansionPanelListState();
}

class _MyExpansionPanelListState extends State<MyExpansionPanelList> {
  List<Item> _data = generateItems(5);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expansion Panel List'),
      ),
      body: SingleChildScrollView(
        child: ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _data[index].isExpanded = !isExpanded;
            });
          },
          children: _data.map<ExpansionPanel>((Item item) {
            return ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text(item.headerValue),
                );
              },
              body: ListTile(
                title: Text(item.expandedValue),
              ),
              isExpanded: item.isExpanded,
            );
          }).toList(),
        ),
      ),
    );
  }
}

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Item $index',
      expandedValue: 'Details for Item $index',
    );
  });
}

위 코드에서 ExpansionPanelList는 여러 ExpansionPanel 항목으로 구성되며, 각 항목에는 headerBuilder와 body가 포함됩니다. expansionCallback은 사용자가 패널을 클릭했을 때 호출되며, 그에 따라 패널을 확장하거나 축소할 수 있습니다.

3. ExpansionPanelList 주요 속성

ExpansionPanelList와 ExpansionPanel의 몇 가지 중요한 속성을 살펴보겠습니다:

expansionCallback: 패널을 확장하거나 축소할 때 호출되는 콜백 함수입니다. 이 콜백을 통해 어떤 패널이 확장되는지 또는 축소되는지를 관리할 수 있습니다.
isExpanded: 각 패널이 확장 상태인지 아닌지를 나타내는 불리언 값입니다. 이 값에 따라 패널의 상태가 변경됩니다.
headerBuilder: 패널의 헤더 부분을 정의하는 빌더 함수입니다. 보통 ListTile을 사용하여 간단하게 구현할 수 있습니다.
body: 패널이 확장되었을 때 보여줄 본문입니다. 주로 상세 정보나 추가 내용을 표시하는 부분입니다.

4. 커스터마이징

ExpansionPanelList는 다양한 방식으로 커스터마이징할 수 있습니다. 예를 들어, 각 패널의 헤더와 본문을 원하는 대로 꾸밀 수 있으며, 확장/축소 애니메이션의 속도나 스타일도 변경할 수 있습니다.

다음은 패널의 본문에 버튼이나 추가 위젯을 넣어 조금 더 상호작용을 할 수 있도록 만든 예제입니다.

ExpansionPanel(
  headerBuilder: (BuildContext context, bool isExpanded) {
    return ListTile(
      title: Text('Custom Item'),
    );
  },
  body: Column(
    children: [
      ListTile(
        title: Text('This is the expanded view'),
      ),
      ElevatedButton(
        onPressed: () {
          print('Button clicked');
        },
        child: Text('Click Me'),
      ),
    ],
  ),
  isExpanded: true,
)

위와 같은 방식으로 각 패널에 다양한 상호작용 요소를 추가할 수 있어, 사용자의 참여도를 높일 수 있습니다.

5. 다양한 사용 사례

ExpansionPanelList는 다음과 같은 다양한 상황에서 유용하게 사용할 수 있습니다:

FAQ 섹션: 자주 묻는 질문과 답변을 리스트 형태로 나열하여, 사용자가 질문을 클릭하면 답변이 보이도록 할 수 있습니다.
제품 정보: 각 제품의 간단한 정보와 함께, 클릭 시 더 많은 세부사항을 보여줄 수 있습니다.
설정 화면: 앱 설정에서 카테고리를 나누고, 각 카테고리를 클릭하면 세부 설정 옵션을 보여주는 형태로 사용할 수 있습니다.

결론

ExpansionPanelList는 Flutter에서 사용자 인터페이스를 보다 깔끔하고 간결하게 만들 수 있는 강력한 도구입니다. 리스트 항목을 확장하고 축소하는 기능을 통해 많은 정보를 한 번에 보여줄 수 있으며, 필요에 따라 세부 사항을 사용자에게 제공합니다. ExpansionPanelList는 특히 FAQ, 설정 화면, 제품 상세 정보 등의 다양한 앱 UI에서 유용하게 사용할 수 있습니다. Flutter 개발에 있어 이러한 확장 패널 리스트를 활용하면 더욱 직관적이고 사용자 친화적인 앱을 만들 수 있을 것입니다.