Flutter expansionpanellist radio

Introduction

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

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.

Lets see the basic structure of the output below:

Lets 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, heres how to make changes if required:

Lets 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.

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

Prepare a list of items.

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.

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

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.

Thats it.

Next article >>

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

Little about me

Little about me

Hi, I am Pinkesh Darji. I write about Flutter at //flutterbeads.com/. I love to solve problems using technology that improves users 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.