ExpansionTile ExpansionPanelList & ExpansionPanel
ExpansionTile: It is a simple and useful widget. This widget lets you create a collapse or expansion view with features similar to ListTile. It is like a ListTile which will expand on tapping the title.
ExpansionTile has the following attributes similar to List Tile:
Properties: backgroundColor: set the background color to the widget.
children: To add a child widget we will use this property
initiallyExpanded: if we set true, child will expands default
onExpansionChanged: To handle the expansion event
title: set the header of the item
How to use ExpansionTile widget inside Flutter Application Below code will show you
ExpansionTile(
childrenPadding: EdgeInsets.zero,
textColor: Colors.black,
title: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: PrimaryColor.withOpacity(0.08),
blurRadius: .5,
spreadRadius: 1,
offset:
Offset(.0, .0), // shadow direction: bottom right
)
],
),
margin:
EdgeInsets.only(left: 0, right: 0, top: 6, bottom: 0),
padding: EdgeInsets.all(1.0),
child: Container(
color:Colors.white.withOpacity(0.5),
padding: EdgeInsets.all(4),
child: Column(
children: [
Container(
transform: Matrix4.translationValues(0.0, -2.0, 0.0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 30,
width: 30,
alignment: Alignment.center,
child: CircleAvatar(
backgroundColor: Colors.transparent,
child:items[index]["TransactionType"] == "IMPS_VERIFY" ?
Icon(Icons.check_circle,color: Colors.green,size: 18,)
:items[index]["TransactionType"] == "IMPS" ?
Image.asset("assets/svgIcon/pngImage/money-transfer.png",width: 25,height: 25,)
:items[index]["TransactionType"] == "Wallet" ?
Image.asset("assets/svgIcon/pngImage/wallet2.png",width: 25,height: 25,)
:Image.asset("assets/svgIcon/pngImage/UPI.png",width: 25,height: 25,)
),
),
SizedBox(
width: 8,
),
Flexible(
flex: 1,
child: Container(
margin: EdgeInsets.only(top: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
items[index]["BankName"],
style: TextStyle(fontSize: 12),
textAlign: TextAlign.left,
),
SizedBox(height: 1,),
Text(
items[index]["AccountNo"],
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
],
),
),
)
],
),
),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
items[index]["Status"] == "SUCCESS" ? Icon(Icons.check_circle,color: Colors.green,size: 14,) : items[index]["Status"] == "Pending" ? Icon(Icons.watch_later,color: Colors.yellow[800],size: 16,) :Icon(Icons.dangerous,color: Colors.red,size: 16,),
Padding(
padding: const EdgeInsets.only(left: 3),
child: Text(items[index]["Status"],style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,),
),
],
),
SizedBox(height: 1,),
Text("\u{20B9} "+items[index]["Amount"].toString(),style: TextStyle(fontWeight: FontWeight.bold),textAlign: TextAlign.right,)
],
),
),
)
],
),
),
),
Container(
transform: Matrix4.translationValues(0.0, -2.0, 0.0),
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
flex: 1,
child: Container(
margin: EdgeInsets.only(top: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"IFSC",
softWrap: true,
style: TextStyle(fontSize: 12),
textAlign: TextAlign.left,
),
SizedBox(height: 1,),
Text(
items[index]["IFSC"],
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
],
),
),
)
],
),
),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("Sender No.".toUpperCase(),style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,),
SizedBox(height: 1,),
Text(items[index]["Sender"],style: TextStyle(fontWeight: FontWeight.bold),textAlign: TextAlign.right,)
],
),
),
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Container(
margin: EdgeInsets.only(top: 5),
color:Colors.white.withOpacity(0.5),
padding: EdgeInsets.only(bottom: 4,top: 4,left: 2,right: 2),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Date',
style: TextStyle(fontSize: 16),
),
Text(
items[index]["M_Date"],
style: TextStyle(fontSize: 16),
textAlign: TextAlign.end,
),
],
),
),
),
],
),
),
),
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: PrimaryColor.withOpacity(0.08),
blurRadius: .5,
spreadRadius: 1,
offset:
Offset(.0, .0), // shadow direction: bottom right
)
],
),
margin: EdgeInsets.only(left: 15,right: 15,top: 0,bottom: 10),
child: Container(
margin: EdgeInsets.only(left: 0.5,right: 0.5,
top: 0.5,bottom: 0.5),
child: Container(
color:Colors.white.withOpacity(0.5),
padding: EdgeInsets.only(top: 5, bottom: 0, left: 5, right: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child:Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Column(
children: [
Text(
"Transaction ID ".toUpperCase(),
style: TextStyle(fontSize: 12),
overflow: TextOverflow.ellipsis,softWrap: true,textAlign: TextAlign.right,),
SizedBox(height: 1,),
Text(items[index]["TransactionId"].toString(),textAlign: TextAlign.right,)
],
),
),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Mode ".toUpperCase(),
style: TextStyle(fontSize: 12),
overflow: TextOverflow.ellipsis,softWrap: true,textAlign: TextAlign.right,),
SizedBox(height: 1,),
Text(items[index]["TransactionDeviceType"].toString(),textAlign: TextAlign.right,)
],
),
),
),
],
),
Container(
margin: EdgeInsets.only(top: 0,bottom: 8),
height: 1,
color: PrimaryColor.withOpacity(0.1),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Pre \u{20B9}".toUpperCase(),textAlign: TextAlign.left,style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} " + items[index]["REM_Remain_Pre"].toString(),textAlign: TextAlign.right,)
],
),
),
),
SizedBox(
width: 2,
height: 28,
child: Container(
width: 2,
color: Colors.black12,
),
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Column(
children: [
Text("Debit \u{20B9}".toUpperCase(),style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} "+items[index]["Debit"].toString(),textAlign: TextAlign.right,)
],
),
),
),
SizedBox(
width: 2,
height: 28,
child: Container(
width: 2,
color: Colors.black12,
),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
child: Column(
children: [
Text("Post \u{20B9}".toUpperCase(),style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} " + items[index]["REM_Remain_Post"].toString(),textAlign: TextAlign.right,)
],
),
),
),
],
),
Container(
margin: EdgeInsets.only(top: 0,bottom: 8),
height: 1,
color: PrimaryColor.withOpacity(0.1),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("GST \u{20B9}".toUpperCase(),textAlign: TextAlign.left,style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} " + items[index]["GST"].toString(),textAlign: TextAlign.right,)
],
),
),
),
SizedBox(
width: 2,
height: 28,
child: Container(
width: 2,
color: Colors.black12,
),
),
Expanded(
child: Container(
alignment: Alignment.center,
child: Column(
children: [
Text("TDS \u{20B9}".toUpperCase(),style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} "+items[index]["TDS"].toString(),textAlign: TextAlign.right,)
],
),
),
),
SizedBox(
width: 2,
height: 28,
child: Container(
width: 2,
color: Colors.black12,
),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
child: Column(
children: [
Text("My Earn \u{20B9}".toUpperCase(),style: TextStyle(fontSize: 12),overflow: TextOverflow.ellipsis,softWrap: true,),
SizedBox(height: 1,),
Text("\u{20B9} " + items[index]["REM_Remain_Post"].toString(),textAlign: TextAlign.right,)
],
),
),
),
],
),
],
),
),
SizedBox(
height: 5,
),
],
),
),
),
),
SizedBox(
height: 5,
)
],
),
],
);
0 Comments
"Please don't put any links in the comments"