Flutter – Expansion Panel

When we want to expand and collapse things then we can do this with the help of an expansion panel. This Expansion panel list is mostly used in the apps and provides extra features to the app. We can create a list of children and wrap it with an Expansion Panel List. We can also create more than one expansion panel in our app. We can control whether the panel is open or not by isExpanded property. 

Follow the below steps to implement the Expansion Panel in Flutter:

Constructor of ExpansionPanel:

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

Properties:

• headerBuilder: It is the widget builder to build the expansion panel.
• body: The body of the expansion panel.
• isExpanded: It is the boolean value to check whether the expansion panel is expanded or not.
• canTapOnHeader: It is a boolean value that can expand the panel if given true.
• backgroundColor: The background color of the expansion panel.

Example:

The homePage.dart file

Dart

import 'package:flutter/material.dart';
import 'package:sports_app/items.dart';
import 'package:velocity_x/velocity_x.dart';

class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  bool active = false;
  String exTitle = "Sport Categories";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ExpansionPanelList(
          expansionCallback: (panelIndex, isExpanded) {
            active = !active;
              if(exTitle=="Sport Categories")
                exTitle="Contract";
              else
                exTitle="Sport Categories";
            setState(() {

            });
          },
          children: <ExpansionPanel>[
            ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return exTitle.text.gray500.make().centered();
                },
                body: Wrap(
                  alignment: WrapAlignment.spaceBetween,
                  spacing: 7,
                  children: [
                    ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.resolveWith<Color>(
                          (Set<MaterialState> states) {
                            if (states.contains(MaterialState.pressed))
                              return Colors.red;

                            // Use the component's default.
                            return Colors.black;
                          },
                        ),
                      ),
                      onPressed: () => null,
                      child: "All".text.make(),
                    ),
                    ElevatedButton(
                      onPressed: null,
                      child: "Basketball".text.black.make(),
                    ),
                    ElevatedButton(
                        onPressed: null, child: "Football".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Tennis".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Fencing".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Swimming".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Hockey".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Karate".text.black.make()),
                  ],
                ),
                isExpanded: active,
                canTapOnHeader: true
                )
          ],
        ),
        for (int i = 0; i < items.length; i++) items[i]
      ],
    );
  }
}

Explanation:

• Expansion panel is created using header builder to create a header of the Expansion Panel.
• The Expansion Panel is wrapped with an Expansion panel list to create a list of Expansion panels.
• In the Expansion Panel, the body is made with some Elevated Buttons.
• isExpaned property is used to manage the expansion panel.
• canTapOnHeader is set to True so that Expansion Panel can be opened by tapping on the header.

Output:

• If we tap dropdown button or header then Expansion Panel will open as shown: