Flutter Expansion Panel Detailed Tutorial

The Flutter Expansion panel List widget is used for expanding and collapse functionality in our app. The Expansion Panel widget is very useful to show something when the user clicks the widget.

In this blog you will learn Flutter expansion panel in detailed manner. So let’s get started.

Flutter Expansion Panel List Tutorial — Flutter Expansion Panel List

Table of Contents

The constructor of the Expansion Panel List Class

ExpansionPanelList({
List<ExpansionPanel> children,
ExpansionPanelCallback? expansionCallback,
Duration animationDuration,
EdgeInsets expandedHeaderPadding,
Color? dividerColor,
int elevation
})

The constructor of the Expansion Panel Class

ExpansionPanel( {
required ExpansionPanelHeaderBuilder headerBuilder, 
required Widget body, 
bool isExpanded: false, 
bool canTapOnHeader: false, 
Color? backgroundColor
} )

Properties of the Expansion Panel List and Expansion Panel

expansionCallback – The ExpansionCallback is triggered When expanding and collapsing the Expansion panel item.
children – The ExpnasionPAnel is the child of ExpansionPanelList.
animationDuration -It defines how long it takes to expand the list. The default duration is 200 milliseconds.
expandedheaderpadding – The padding that surrounds the panel header when expanded.
dividerColor – It defines the color of the ExpansionPanel divider.
elevation – It defines the elevation of the Expansion Panel.
headerBuilder – The headerBuilder is used for building the header of the Expansion Panel.
body – The body widget is used to show, details of the item when it is expanded.
isExpanded – By default the isExpanded value is false. The isExpanded boolean value checks whether the particular panel is expanded or not.
canTapOnHeader – By default the canTapOnHeader value is false. It expands the particular panel When the given value is true.
backgroundColor – It defines the background color of the expansion panel.

Example of the Expansion Panel List

class ExpansionPanelDemo extends StatefulWidget {
  @override
  _ExpansionPanelDemoState createState() => _ExpansionPanelDemoState();
}

class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expansion Panel (CodeWithFlutter)'),
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: ListView.builder(
          itemCount: itemData.length,
          itemBuilder: (context, index) {
            return Container(
              margin: EdgeInsets.only(bottom: 10.0),
              child: ExpansionPanelList(
                animationDuration: Duration(milliseconds: 500),
                dividerColor: Colors.red,
                expandedHeaderPadding: EdgeInsets.only(bottom: 0.0),
                elevation: 1,
                children: [
                  ExpansionPanel(
                    headerBuilder: (BuildContext context, bool isExpanded) {
                      return Container(
                        padding: EdgeInsets.all(10),
                        child: Text(
                          itemData[index].headerItem,
                          style: TextStyle(
                            color: itemData[index].colorsItem,
                            fontSize: 18,
                          ),
                        ),
                      );
                    },
                    body: Container(
                      padding: EdgeInsets.only(left: 10, right: 10, bottom: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            itemData[index].discription,
                            style: TextStyle(
                              color: Colors.grey[700],
                              fontSize: 15,
                              height: 1.3,
                            ),
                          ),
                        ],
                      ),
                    ),
                    isExpanded: itemData[index].expanded,
                  )
                ],
                expansionCallback: (int item, bool status) {
                  setState(() {
                    itemData[index].expanded = !itemData[index].expanded;
                  });
                },
              ),
            );
          },
        ),
      ),
    );
  }

  List<ItemModel> itemData = <ItemModel>[
    ItemModel(
      headerItem: 'Android',
      discription:
          "Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets.",
      colorsItem: Colors.green,
    ),
    ItemModel(
      headerItem: 'iOS',
      discription:
          "iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware.",
      colorsItem: Colors.grey,
    ),
    ItemModel(
      headerItem: 'Windows',
      discription:
          "Microsoft Windows, commonly referred to as Windows, is a group of several proprietary graphical operating system families, all of which are developed and marketed by Microsoft. ",
      colorsItem: Colors.blue,
    ),
    ItemModel(
      headerItem: 'Linux',
      discription:
          "Linux is a family of open-source Unix-like operating systems based on the Linux kernel, an operating system.",
      colorsItem: Colors.orange,
    ),
  ];
}