Flutter - Expansion Panel - GeeksforGeeks

14 May, 2021
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:
ExpansionPanel(
{required ExpansionPanelHeaderBuilder headerBuilder,
required Widget body,
bool isExpanded: false,
bool canTapOnHeader: false,
Color? backgroundColor}
)
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:
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Android Studio Setup for Flutter Development
Flutter - Flexible Widget
What is widgets in Flutter?
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - BorderRadius Widget