As we all know at present time most of technology is mobile based. Mobiles are growing so fast between humans as they are part of their life. Today everything is based on mobile like purchasing, selling etc. People can sell their products online, also buy new products online using e-commerce websites. At the time of vising E-Commerce mobile application we have seen so much different type of products on their application and All the products are managed very beautifully using Expandable ListView. Expandable ListView is a type of list view which is used to show multiple type of data based on category and sub category wise. In flutter we can easily make our own Expandable ListView using their ExpansionTile widget. In today’s tutorial we would learn about Example of Creating Expandable ListView in Flutter Android iOS application. So let’s get started 🙂 .
Contents in this project Example of Creating Expandable ListView in Flutter Android iOS:
1. Open your flutter project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 2 3 |
void main() { runApp(MyApp()); } |
3. Now we would make a final type of List in our file named as data. The List is type of DataList class which we would create in next 4th step. In this List we would define our all Data which we would display in our expandable ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
final List<DataList> data = <DataList>[ DataList( 'Mobiles', <DataList>[ DataList( 'MI', <DataList>[ DataList('Redmi Note 9'), DataList('Redmi Note 10'), DataList('Mi 10i 5G'), ], ), DataList('Samsung'), DataList('Apple'), ], ), DataList( 'Laptops', <DataList>[ DataList('Dell'), DataList('HP'), ], ), DataList( 'Appliances', <DataList>[ DataList('Washing Machine'), DataList('AC'), DataList( 'Home Appliances', <DataList>[ DataList('Water Purifier'), DataList('Inverter'), DataList('Vacuum Cleaner'), ], ), ], ), ]; |
4. Creating another class named as DataList. Using this class we would print all the items of List in Parent Children format.
|
1 2 3 4 5 6 |
class DataList { DataList(this.title, [this.children = const <DataList>[]]); final String title; final List<DataList> children; } |
5. Creating our main MyApp extends StatelessWidget class. In this class we would make the ListView.builder() and using the DataPopUp class starts printing items on screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Expandable ListView in Flutter'), ), body: ListView.builder( itemBuilder: (BuildContext context, int index) => DataPopUp(data[index]), itemCount: data.length, ), ), ); } } |
6. Creating another class named as DataPopUp extends StatelessWidget . In this class we would make a custom widget named as _buildTiles(). Now using the ExpansionTile expandalble ListView widget we would print the items using DataList.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class DataPopUp extends StatelessWidget { const DataPopUp(this.popup); final DataList popup; Widget _buildTiles(DataList root) { if (root.children.isEmpty) return ListTile(title: Text(root.title)); return ExpansionTile( key: PageStorageKey<DataList>(root), title: Text( root.title, ), children: root.children.map(_buildTiles).toList(), ); } @override Widget build(BuildContext context) { return _buildTiles(popup); } } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } final List<DataList> data = <DataList>[ DataList( 'Mobiles', <DataList>[ DataList( 'MI', <DataList>[ DataList('Redmi Note 9'), DataList('Redmi Note 10'), DataList('Mi 10i 5G'), ], ), DataList('Samsung'), DataList('Apple'), ], ), DataList( 'Laptops', <DataList>[ DataList('Dell'), DataList('HP'), ], ), DataList( 'Appliances', <DataList>[ DataList('Washing Machine'), DataList('AC'), DataList( 'Home Appliances', <DataList>[ DataList('Water Purifier'), DataList('Inverter'), DataList('Vacuum Cleaner'), ], ), ], ), ]; class DataList { DataList(this.title, [this.children = const <DataList>[]]); final String title; final List<DataList> children; } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Expandable ListView in Flutter'), ), body: ListView.builder( itemBuilder: (BuildContext context, int index) => DataPopUp(data[index]), itemCount: data.length, ), ), ); } } class DataPopUp extends StatelessWidget { const DataPopUp(this.popup); final DataList popup; Widget _buildTiles(DataList root) { if (root.children.isEmpty) return ListTile(title: Text(root.title)); return ExpansionTile( key: PageStorageKey<DataList>(root), title: Text( root.title, ), children: root.children.map(_buildTiles).toList(), ); } @override Widget build(BuildContext context) { return _buildTiles(popup); } } |
Screenshots:-
Hey good work. What if I want to expand list to gridview. How should I go about it?
Prince, You want grid layout when you expand the List . Am I right ?
Yes you are right….. You expand to grid layout instead of list