Display Expansion Panel in Flutter

An expansion panel is expandable container that has a header and a body. A panel has two states - collapsed or expanded. The body of the panel is only visible when it is expanded.

We define a MyPanelItem class to hold information about panel item. We use ExpansionPanelList to lay out expansion items defined as ExpansionPanel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyPanelItem {
  bool isExpanded;
  final String header;
  final String body;

  MyPanelItem({this.header = '', this.body = '', this.isExpanded = false});
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<MyPanelItem> _items = <MyPanelItem>[
    MyPanelItem(header: "Header 1", body: "Body 1"),
    MyPanelItem(header: "Header 2", body: "Body 2"),
    MyPanelItem(header: "Header 3", body: "Body 3"),
  ];

  Widget _buildPanel() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _items[index].isExpanded = !isExpanded;
        });
      },
      children: _items.map((MyPanelItem item) {
        return ExpansionPanel(
          isExpanded: item.isExpanded,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(title: Text(item.header));
          },
          body: ListTile(title: Text(item.body)),
        );
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Expansion panel')),
      body: ListView(
        children: <Widget>[
          _buildPanel(),
        ],
      ),
    );
  }
}