DEV Community


Flutter ExpansionTile Example

rrtutors profile image rrtutors Updated on ・1 min read

We have two ways of creating an expandable view in flutter.

ExpansionPanelList & ExpansionPanel

Flutter ExpansionTile

It is a simple and useful widget. This widget lets you create a collapse or expansion view with features similar to ListTile. It is like a ListTile which will expand on tapping the title.

ExpansionTile has the following attributes similar to List Tile:

backgroundColor: set the background color to the widget.

children: To add a child widget we will use this property

initiallyExpanded: if we set true, child will expands default

onExpansionChanged: To handle the expansion event

title: set the header of the item

How to use ExpansionTile widget inside Flutter Application
Below code will show you

          key: PageStorageKey(this.widget.headerTitle),
          title: Container(
              width: double.infinity,

              child: Text("Header",style: TextStyle(fontSize: 18),),
          trailing: Icon(Icons.arrow_drop_down,size: 32,color:,),
          onExpansionChanged: (value){
            setState(() {
          children: [
           Text("Child 1",style: TextStyle(fontSize: 18),),
            Text("Child 2",style: TextStyle(fontSize: 18),),
Enter fullscreen mode Exit fullscreen mode

Expandable Listview Examples

Discussion (0)

Editor guide