How to Add Accordion in Flutter

In this example, we are going to show you 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:

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:

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:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  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


  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Accordion in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
             child: Column(
                children: [
                  ExpansionTile(
                    title: Text("FAQ QUESTION ONE"),
                    children: [
                          Container( 
                              color: Colors.black12,
                              padding:EdgeInsets.all(20),
                              width: double.infinity,
                              child:  Text("Answers for Question One"),
                          )
                    ],
                  ),

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

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