[Solved] ExpansionPanel is not Expanding or Collapsing

When you work with ExpansionPanel or ExpansionPanelList for the first time, you may face where Expansion Panel not expanding or collapsing in Flutter. To solve this issue, you have to do the small trick with ExaansionPanel, see the example below:

First, set the boolean values to track the expanding and collapsing of each ExpansionPanel inside ExpansionPanelList:

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

You have to define different boolean lists for different ExpansionPanelList.

Now, put a callback function on ExpansionPanelList, which gets triggered when expanding and collapsing of ExpansionPanel:

ExpansionPanelList(
      expansionCallback: (panelIndex, isExpanded) {
          setState(() {
            expanded[panelIndex] = !isExpanded;
          });
      },
)

Now, set these dynamic boolean to isExpanded attribute of ExpansionPanel:

ExpansionPanelList(
  expansionCallback: (panelIndex, isExpanded) {
      setState(() {
        expanded[panelIndex] = !isExpanded;
      });
  },
  children:[
    ExpansionPanel(
        isExpanded: expanded[0]
    ),

    ExpansionPanel(
        isExpanded: expanded[1]
    )
  ]
)

To understand this in detail, see the app example below:

Full App Example:

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("ExpansionPanel in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: SingleChildScrollView(
             child:ExpansionPanelList(
                expansionCallback: (panelIndex, isExpanded) {
                    setState(() {
                      expanded[panelIndex] = !isExpanded;
                    });
                },
                children:[
                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return Padding( 
                            padding: EdgeInsets.all(15),
                            child:Text("FAQ QUESTION")
                        );
                      },
                      body: Container(
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[0]
                  ),

                  ExpansionPanel(
                      headerBuilder: (context, isOpen){
                        return Padding( 
                            padding: EdgeInsets.all(15),
                            child:Text("FAQ QUESTION")
                        );
                      },
                      body: Container(
                        child: Text("hello world"),
                      ),
                      isExpanded: expanded[1]
                  )
                ]
             )
          )
       );
  }
}

In this way, you can solve ExapansionPanel not expanding or collapsing inside ExpansionPanelList in Flutter.