How to Add an Accordion to Your Flutter App

In this tutorial, we will learn how to add an expandable and collapsing accordion in Flutter. Accordion is an important component of UI used to show hidable information in the user interface. See the example below:

Method 1: Using ExpansionTile():

ExpansionTile(
  title: Text("FAQ QUESTION ONE"), //header title
  children: [ 
        Container( 
            color: Colors.black12,
            padding:EdgeInsets.all(20),
            width: double.infinity,
            child:  Text("Answers for Question One"),
        )
  ],
)

You can use ExpansionTile to make expanding or collapsing accordions in Flutter. Furthermore, you can change its background color like below:

Card(
  color: Colors.greenAccent[100],
  child:ExpansionTile(
  title: Text("FAQ QUESTION TWO"),
  
  children: [
        Container( 
            color: Colors.black12,
            padding:EdgeInsets.all(20),
            width: double.infinity,
            child:  Text("Answers for Question Two"),
        )
  ],
  )
)

The output of these codes is:

Method 2: Using ExpansionPanelList and ExpansionPanel:

Set the expansion status list for ExapnasionPanel:

List<bool> expanded = [false, false];
//expaned status boolean for ExpansionPanel
//we have two panels so the bool value
//set bool to true, if you want to expand accordion by default

Here, we set only two, because, we are going to set only two Expansion Panel inside ExpansionPanelList.

ExpansionPanelList(
    expansionCallback: (panelIndex, isExpanded) {
        setState(() {
          expanded[panelIndex] = !isExpanded;
        });
    },
    animationDuration: Duration(seconds: 2),
    //animation duration while expanding/collapsing
    children:[
      ExpansionPanel(
        headerBuilder: (context, isOpen){
          return Padding( 
              padding: EdgeInsets.all(15),
              child:Text("FAQ QUESTIOn THREE")
          );
        },
        body: Container(
          padding: EdgeInsets.all(20),
          color: Colors.redAccent[100],
          width: double.infinity,
          child: Text("hello world"),
        ),
        isExpanded: expanded[0]
      ),

      ExpansionPanel(
        headerBuilder: (context, isOpen){
          return Padding( 
              padding: EdgeInsets.all(15),
              child:Text("FAQ QUESTIOn FOUR")
          );
        },
        body: Container(
          padding: EdgeInsets.all(20),
          color: Colors.blueAccent[100],
          width: double.infinity,
          child: Text("hello world"),
        ),
        isExpanded: expanded[1]
      )
    ]
)

The output of this code:

In this way, you can add expanding or collapsing accordion in Flutter. 

#flutter