Easy and quick guide to implement the Expansion Panel List in Flutter.

Introduction

You must have seen this interaction in many of the apps.

What does it do?

Expansion panel list is a list that shows its children using expansion animation on click of item.

Let’s see the basic structure for the below output

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {},
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('Item 1'),
        );
      },
      body: ListTile(
        title: Text('Item 1 child'),
        subtitle: Text('Details goes here'),
      ),
      isExpanded: true,
    ),
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text('Item 2'),
        );
      },
      body: ListTile(
        title: Text('Item 2 child'),
        subtitle: Text('Details goes here'),
      ),
      isExpanded: false,
    ),
  ],
);

Understand it’s properties

➊ expansionCallBack:

This gets called whenever the expand/collapsed button is pressed on any of the items inside the list.

It gives us two things.

1. Index of the clicked item
2. Whether to expand or collapsed the item clicked.

➋ children:

ExpansionPanel widget is used as a child for the ExpansionPanelList. This widget has got below properties.

1. headerBuilder: Used to show the header of the item.
2. body: Used to show the details of the item when expanded.
3. isExpanded: This is very important as it decides whether to expand/collapsed the item or not. Defaults to false.
4. canTapOnHeader: Be default, You have to click on ^ icon to expand but you can pass true to this property to also make header of the item clickable.

➌ animationDuration:

Used to define the duration in which the expand and collapsed animation should complete. It defaults to 200ms.

However, it is recommended to keep it to the original you can still change it to anything like this.

animationDuration: Duration(milliseconds: 300),

#flutter #mobile-apps #developer