How To Create Expansion Panel List In Flutter

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

source: https://www.canva.com/

Introduction

You click on a panel — it expands, click again and it collapses. This is a very common interaction used extensively in apps. It’s called an Expansion Panel List, and we’re taking a deep dive into learning to build one, quickly, and easily.

source — https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

What does it do?

The Expansion Panel List shows its children by animating expansion on clicking the item.

Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published.

Let’s see the basic structure of the output below:

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,
    ),
  ],
);

Let’s understand its properties

➊ expansionCallBack:

This gets called whenever the expand/collapse 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:

The ExpansionPanel widget is used as a child of the ExpansionPanelList. Its properties are as listed below:

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/collapse the item or not. It defaults to false.
4. canTapOnHeader: By default, you have to click on the ^ icon to expand the panel, but you can pass true (any alternative to pass true?) to this property and it will make the item header clickable as well.

➌ animationDuration:

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

Even though it is recommended to keep this value unchanged, here’s how to make changes if required:

animationDuration: Duration(milliseconds: 300),

Let’s make it dynamic

Consider the elementary code shown so far as a foundation for the exercise. I found it necessary to clarify these before we begin to build.

So how do we actually make it work? Here are the steps.

➊ Create a class that will hold the data for the item.

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

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

bool isExpanded will be used to determine whether the item needs to expand or not.

➋ Prepare a list of items.

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

➌ Map each item in the list to ExpansionPanel because we are going to use it as a child for the ExpansionPanelList and not as an item on its own.

children: _books.map<ExpansionPanel>((Item item) {
  return ExpansionPanel();
}).toList(),

➍ On receiving expansionCallback change the isExpanded parameter of the item inside the list of books and rebuild a widget.

expansionCallback: (int index, bool isExpanded) {
  setState(() {
    _books[index].isExpanded = !isExpanded;
  });
},

Click on RunPen to read and play with the code

Thanks for reading. If you found this article helpful please do share it with your friends.

Bonus Tip

If you want only one item expanded at a time while closing other panels on the list then try this.

That’s it.

Next article >>

Flutter Widget In Focus — Chip (Know It All)

For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.

Little about me

Little about me

Hi, I am Pinkesh Darji. I write about Flutter at https://flutterbeads.com/. I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles.

Pinkesh Darji 💙

pinkeshdarji — Overview