Hello friends, I will talk about my new blog on Expansion Panel Widget In Flutter. We will also implement a demo of the Expansion Panel Widget, and describes its properties, and how to use them in your flutter applications. So let’s get started.
Table Of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”
Expansion Panel Widget :
The Flutter Expansion Panel is a great widget to achieve expansion /collapse functionality. It has an Expansion Panelist and Expansion Panel to create the detail view. The extension panel list shows your children by clicking on the item and animating the extension. In simple words, it means to show the header details of the expansion panel.
Properties of the Expansion panel and Expansion panel list:
- HeaderBuilder: The header builder property is used to design the visible portion of the title of the list.
- Body: The body property is used to expand and collapse the item, it can contain any widget.
- isExpanded: This isExpand property is very important, it decides whether to extend the item or not, it is a type of bool.
- AnimationDuration: The Animation Duration property is used for the time taken to expand. Its default value is 200 milliseconds..
- Children Expansion A callback that is triggered upon opening and closing any item inside a list
- ExpansionCallback: Expansion callback that is triggered upon opening and closing any item inside a list.
Demo Module :
Code Implementation :
You need to implement it in your code respectively:
Create a new dart file called expansion_pannel_demo.dart inside the libfolder.
As we have shown the Expansion Panel List Widget in this screen, firstly we have created a list with the help of a ListView Builder, inside it the Expansion Panel List widget is initialized and within its Children property, the Expansion Panel is taken Its property is defined inside.
A class is created named Item Model which will hold the data for our item
class ItemModel {
bool expanded;
String headerItem;
String discription;
Color colorsItem;
String img;
ItemModel({this.expanded: false, this.headerItem, this.discription,this.colorsItem,this.img});
}
Let us understand this with the help of a reference.
ExpansionPanelList(
animationDuration: Duration(milliseconds:1000),
dividerColor:Colors.red,
elevation:1,
children: [
ExpansionPanel(
body: Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment:CrossAxisAlignment.start,
children: <Widget>[
ClipOval(
child:CircleAvatar(
child:Image.asset(itemData[index].img,fit:BoxFit.cover,),
),
),
SizedBox(height:30,),
Text(
itemData[index].discription,
style: TextStyle(
color: Colors.grey[700],
fontSize:15,letterSpacing:0.3,height:1.3
),
),
],
),
),
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
padding: EdgeInsets.all(10),
child: Text(
itemData[index].headerItem,
style: TextStyle(
color:itemData[index].colorsItem,
fontSize: 18,
),
),
);
},
isExpanded: itemData[index].expanded,
)
],
expansionCallback: (int item, bool status) {
setState(() {
itemData[index].expanded =
!itemData[index].expanded;
});
},
);
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code FIle :
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_expansion_panel_demo/model/expnasion_panel_model.dart';
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 Demo'),
),
body: Container(
padding: EdgeInsets.all(10),
child: ListView.builder(
itemCount: itemData.length,
itemBuilder: (BuildContext context, int index) {
return ExpansionPanelList(
animationDuration: Duration(milliseconds: 1000),
dividerColor: Colors.red,
elevation: 1,
children: [
ExpansionPanel(
body: Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipOval(
child: CircleAvatar(
child: Image.asset(
itemData[index].img,
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 30,
),
Text(
itemData[index].discription,
style: TextStyle(
color: Colors.grey[700],
fontSize: 15,
letterSpacing: 0.3,
height: 1.3),
),
],
),
),
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
padding: EdgeInsets.all(10),
child: Text(
itemData[index].headerItem,
style: TextStyle(
color: itemData[index].colorsItem,
fontSize: 18,
),
),
);
},
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. ... Some well known derivatives include Android TV for televisions and Wear OS for wearables, both developed by Google.",
colorsItem: Colors.green,
img: 'assets/images/android_img.png'
),
];
}
Conclusion:
In this article, I have explained an Expansion Panel Widgetin a flutter, which you can modify and experiment with according to your own, this little introduction was from the Expansion Panel demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Expansion Panel in your flutter project. We showed you what the Expansion Panel is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
From Our Parent Company Aeologic
Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.
Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
