In this tutorial you will learn how to use expansion panel list in flutter with example. Also learn how to customize its style with different properties.
Expansion panel list is a material widget in flutter which is similar to listView. It can only have Expansion panels as children. In some instances we might have to display a list where the children can expand/collapse to show/hide some detailed information. To display such list flutter provides a widget called ExapansionPanelList.
In this list, each child is an ExpansionPanel widget. We cannot use other widgets as children for this list. We can handle the change in state[ Expansion or collapse ] of an item with the help of ExpansionCallback property.
To use expansion panel list we have to create one by calling its constructor.
To create and display an expansion panel list we have to use ExpansionPanelList widget provided by flutter. It has no required properties but we have to provide at least one child if we want to use it. The widget require unlimited space along main axis. If the requirement doesnt met it will throw assertion error. To solve this problem add expansion panel list widget as a child for SingleChildScrollView.
Lets see an example where we create an expansion panel list and add 15 children to it. For this we will create a pojo class ListItem which will hold each item data and two functions generateItems[] and _getExpansionPanels[]. We will handle the change in state[ Expanded or collapsed] of an item using ExpansionCallback property.
The generateItems function should be provided with an argument of type integer which is the number of items we want to generate. It returns a List of type ListItem [ List]. It will generate data for each item and returns the complete list. We will store the list in a variable called _items which is a List of type ListItem [ List].
The _getExpansionPanels function should be provided with an argument of type List. The List type should be ListItem [ List]. So we will pass the _items to this function. It will return a List of type ExpansionPanel [ List] which will be the children. Lets see the code below.
This class will hold data of each item.
This function generates data for all the list items using the pojo class ListItem and returns the List.
This function will generate Expansion panels using the data generated by the above function and returns a List of expansion panels. In the below example i am returning an expansion panel where header and body are a ListTile with only title. If you want to customize the expansion panel with more properties refer expansion panel widget example.
Below is the complete code example of how to use Expansion panel list widget in flutter.
When the expansion panel is expanded or collapsed, we have to update the state to make changes in the UI. whenever an item in the expansion panel list is expanded or collapsed we will pass the expansion callback with two arguments. The first one is index of the panel which is an integer and second one is isExpanded which is the state of the panel at given index.It is a boolean value. Based on the two values we will update the state and the UI.
While expanding or collapsing we can observe some animation take palce for a certain time period. We can change that duration by using animationDuration property of expansion panel list. We just have to provide Duration in either microseconds, milliseconds or minutes as value.
If we want to set padding to header when the panel is in expanded state we can do so by using the expandedHeaderPadding property.
We can change the divide color using the dividerColor property. The value for this property should be of type Color.
If we want to set elevation when the expansion panel is expanded use elevation property.
That brings an end to the tutorial on how to use expansion panel List in flutter with example. I hope you understand how to create and display or show expansion panel list in flutter. Lets catch up with some other widget in the next post. Have a great day!!
Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!