Expandable ListView in Flutter

In this blog, We are going to learn how we can create an expandable listview in our flutter applications. Expandable ListView is a type of list view that is used to show multiple types of data based on category and subcategory. Expandable list view is used to expand or collapse the view in list items In a flutter app. We can easily make our own Expandable ListView using the ExpansionTile widget.

Expansions Tile Widget :

ExpansionTiles is used to produce two-level or multi-level lists in the app. ExpansionTiles widget is a detailed tile. It is like a ListTile widget which will expand by tapping the tile. We can display some detailed information on the list with ExpansionTiles.

Properties of the Expansions Tile :

title: The title property allows you to display the title for the expansion tile widget.
subTitle: The subTitle property allows you to display additional content below the title.
children: The children’s property holds any number of widgets. The children’s widgets are displayed when the tile expands.
leading: The leading property allows you to display a leading icon or text.
trailing: Use the trailing property to the right after the title, you can use text and icons in this property.
backgroundColor: The background property gives color to the background of the expanded tile. Note, it assigns a color to the extended tile.
onExpensionChanged: This function is called with the value true, When the tile collapses, this function is called with the value false.

Code For Expandable listview:

Here’s the complete code ->

main.dart file

import 'package:expanded_listview_demo/subCategory.dart';
import 'package:flutter/material.dart';
import 'dataModel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  List<Menu> data = [];

  @override
  void initState() {
    dataList.forEach((element) {
      data.add(Menu.fromJson(element));
    });
    super.initState();
  }
  @override
   Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        drawer: _drawer(data),
        appBar: AppBar(
          title: const Text('Expandable ListView'),
        ),
        body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) =>
              _buildList(data[index]),
        ),
      ),
    );
  }

  Widget _drawer (List<Menu> data){
    return Drawer(
        child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                UserAccountsDrawerHeader(margin: EdgeInsets.only(bottom: 0.0),
                    accountName: Text('demo'), accountEmail: Text('demo@webkul.com')),
                ListView.builder(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: data.length,
                  itemBuilder:(context, index){return _buildList(data[index]);},)
              ],
            ),
          ),
        ));
  }

  Widget _buildList(Menu list) {
    if (list.subMenu.isEmpty)
      return Builder(
        builder: (context) {
          return ListTile(
              onTap:() => Navigator.push(context, MaterialPageRoute(builder: (context) => SubCategory(list.name))),
              leading: SizedBox(),
              title: Text(list.name)
          );
        }
      );
    return ExpansionTile(
      leading: Icon(list.icon),
      title: Text(
        list.name,
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      children: list.subMenu.map(_buildList).toList(),
    );
  }
}

import 'package:expanded_listview_demo/subCategory.dart';

import 'package:flutter/material.dart';

import 'dataModel.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatefulWidget {

@override

State<MyApp> createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

List<Menu> data = [];

@override

void initState() {

dataList.forEach((element) {

data.add(Menu.fromJson(element));

});

super.initState();

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

drawer: _drawer(data),

appBar: AppBar(

title: const Text('Expandable ListView'),

body: ListView.builder(

itemCount: data.length,

itemBuilder: (BuildContext context, int index) =>

_buildList(data[index]),

);

}

Widget _drawer (List<Menu> data){

return Drawer(

child: SafeArea(

child: SingleChildScrollView(

child: Column(

children: [

UserAccountsDrawerHeader(margin: EdgeInsets.only(bottom: 0.0),

accountName: Text('demo'), accountEmail: Text('[email protected]')),

ListView.builder(

shrinkWrap: true,

physics: NeverScrollableScrollPhysics(),

itemCount: data.length,

itemBuilder:(context, index){return _buildList(data[index]);},)

));

}

Widget _buildList(Menu list) {

if (list.subMenu.isEmpty)

return Builder(

builder: (context) {

return ListTile(

onTap:() => Navigator.push(context, MaterialPageRoute(builder: (context) => SubCategory(list.name))),

leading: SizedBox(),

title: Text(list.name)

);

}

);

return ExpansionTile(

leading: Icon(list.icon),

title: Text(

list.name,

style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

children: list.subMenu.map(_buildList).toList(),

);

}

datamodel.dart file ->

import 'package:flutter/material.dart';

List dataList = [
  {
    "name": "Sales",
    "icon": Icons.payment,
    "subMenu": [
      {"name": "Orders"},
      {"name": "Invoices"}
    ]
  },
  {
    "name": "Marketing",
    "icon": Icons.volume_up,
    "subMenu": [
      {
        "name": "Promotions",
        "subMenu": [
          {"name": "Catalog Price Rule"},
          {"name": "Cart Price Rules"}
        ]
      },
      {
        "name": "Communications",
        "subMenu": [
          {"name": "Newsletter Subscribers"}
        ]
      },
      {
        "name": "SEO & Search",
        "subMenu": [
          {"name": "Search Terms"},
          {"name": "Search Synonyms"}
        ]
      },
      {
        "name": "User Content",
        "subMenu": [
          {"name": "All Reviews"},
          {"name": "Pending Reviews"}
        ]
      }
    ]
  }
];

class Menu {
  String name;
  IconData icon;
  List<Menu> subMenu = [];

  Menu({this.name, this.subMenu, this.icon});

  Menu.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    icon = json['icon'];
    if (json['subMenu'] != null) {
      subMenu.clear();
      json['subMenu'].forEach((v) {
        subMenu?.add(new Menu.fromJson(v));
      });
    }
  }
}

import 'package:flutter/material.dart';

List dataList = [

{

"name": "Sales",

"icon": Icons.payment,

"subMenu": [

{"name": "Orders"},

{"name": "Invoices"}

]

{

"name": "Marketing",

"icon": Icons.volume_up,

"subMenu": [

{

"name": "Promotions",

"subMenu": [

{"name": "Catalog Price Rule"},

{"name": "Cart Price Rules"}

]

{

"name": "Communications",

"subMenu": [

{"name": "Newsletter Subscribers"}

]

{

"name": "SEO & Search",

"subMenu": [

{"name": "Search Terms"},

{"name": "Search Synonyms"}

]

{

"name": "User Content",

"subMenu": [

{"name": "All Reviews"},

{"name": "Pending Reviews"}

]

}

]

}

];

class Menu {

String name;

IconData icon;

List<Menu> subMenu = [];

Menu({this.name, this.subMenu, this.icon});

Menu.fromJson(Map<String, dynamic> json) {

name = json['name'];

icon = json['icon'];

if (json['subMenu'] != null) {

subMenu.clear();

json['subMenu'].forEach((v) {

subMenu?.add(new Menu.fromJson(v));

});

}

Outputs:

Conclusion

In this blog, we have discussed how we can create an expandable listview on our app screen. I hope it will help you out in understanding and get a brief idea about it.

Mobikul is known for developing best-design mobile apps for all open-source e-commerce platforms including WooCoomerce Mobile App, Magento 2 App, Opencart App, and others. Reach out to our team via email to get started.

Mohit Kumar 30 March 2022

. . .

2 comments

Safaa Jun 24, 2022 at 9:10 pm

Thanks for this tutorial. However, it needs
import ‘package:expanded_listview_demo/subCategory.dart’;

which is not available in the tutorial. Could You please provide it.

Mohit Kumar (Moderator) Aug 3, 2022 at 10:25 am
Hi Safaa,This is a simple widget to show the details of a subcategory.
import ‘package:flutter/material.dart’;
class SubCategory extends StatelessWidget {
String? name;
SubCategory(this.name,{Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(name ??”),),
body: Center(child: Text(
“This is $name category screen”
),)
);
}
}

Reply

Expandable ListView in Flutter

Expansions Tile Widget :

Properties of the Expansions Tile :

Code For Expandable listview:

Conclusion

Leave a Comment Cancel Reply

2 comments

Message Sent!