Expansion Panel List In Flutter.
Easy and quick guide to implement the Expansion Panel List in Flutter.
Hello friends, I will talk about another blog on the Expansion Panel list In Flutter. We will also implement a demo of the Expansion Panel List, and how to use them in your flutter applications. So let’s get started.
In many applications, you have seen an expansion panel list view like the above. You click on a panel it expands, click again and it collapses. This is a very common interaction used extensively in apps. It’s called an Expansion Panel List, and we’re taking a deep dive into learning too quickly and easily.
Properties of the Expansion Panelist:
- 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.
- is Expanded: This isExpand property is very important, it decides whether to extend the item or not, it is a type of bool.
- ExpansionCallback: Expansion callback that is triggered upon opening and closing any item inside a list.
- Children Expansion A callback that is triggered upon opening and closing any item inside a list.
- Animation Duration: The Animation Duration property is used for the time taken to expand.
Implementation:
You need to implement your code in respectively.
A class is created Item Wich will hold the Data for our Items.
class Item {
Item({
this.expandedValue,
this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}Prepare a list of items.
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Item $index',
expandedValue: 'This is item number $index',
);
});
}Map each item in the list of expansion panel list.
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel();
}).toList(),isExpanded parameter of the item inside the item rebuild widget.
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},Let us understand this with the help of a reference.
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: const Text('This is ListTile expansion panel'),
onTap: () {
setState(() {
_data.removeWhere((Item currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
);After creating your project delete everything within your main.dart file and write this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
static const String _title = 'Expansion Panel List';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: Expansionview(),
),
);
}Create the home. dart with a class Expansionview() which extends a Statefull widget. In this class return the Scaffold widget and within this add Column including RaisedButtons which will navigate you to the respective expansion view example.
The Expansionview. dart Looks like this.
import 'package:flutter/material.dart';class Expansionview extends StatefulWidget {
const Expansionview({Key key}) : super(key: key);
@override
State<Expansionview> createState() => _ExpansionviewState();
}
class _ExpansionviewState extends State<Expansionview> {
final List<Item> _data = generateItems(10);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: const Text('This is ListTile expansion panel'),
onTap: () {
setState(() {
_data.removeWhere((Item currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}
Singe Code File :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
static const String _title = 'Expansion Panel List';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: Text(_title)),
body: Expansionview(),
),
);
}
}
class Item {
Item({
this.expandedValue,
this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Item $index',
expandedValue: 'This is item number $index',
);
});
}
instantiates.
class Expansionview extends StatefulWidget {
const Expansionview({Key key}) : super(key: key);
@override
State<Expansionview> createState() => _ExpansionviewState();
}
class _ExpansionviewState extends State<Expansionview> {
final List<Item> _data = generateItems(10);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle: const Text('This is ListTile expansion panel'),
onTap: () {
setState(() {
_data.removeWhere((Item currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}Conclusion
In this article, I have explained an Expansion Panel Widget in 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 on 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.
Feel free to connect with us
And read more articles from FlutterDevs.com.