Flutter expandable listview tutorial

Flutter Expandable Listview :

Flutter expandable listview is used to populate data under various categories according to the variant.For example when you want to show user a list of electronic items to the user you can use this type of listview

Under electronics you can further classify items as T.V, Refrigerator,  A.C and many more appliances and can provide different categories easily in the form of list.

Apps like food delivery, online shopping and many more apps provide these flutter expandable listviews to show a minimum data like title of the product and once expanded show the further details.

The main advantage of this expandable list view is the user can have a very minimal space and as the view is expanded he can fit more data and also data is available according to the categories so that it is easier for user to navigate.

In this tutorial on flutter expandable listview we will be dealing with creating a listview of three variants showing the expansion and collapsing of the data accordingly.

Flutter Expandable Listview Video Tutorial:

main.dart :

Initialize with void main() and consider a default class MyApp

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

Return a MaterialApp with scaffold defined in home and add body tag where you specify the ListView.builder to which we provide the list of data to be loaded.

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: const Text('Expandable ListView'),
    ),
    body: ListView.builder(
      itemBuilder: (BuildContext context, int index) =>
          EntryItem(data[index]),
      itemCount: data.length,
    ),
  ),
);

Provide the data to be loaded into the flutter expandable listview , here we are designing a listview in three variants and which can be further adjusted according to your requirements.

final List<Entry> data = <Entry>[
  Entry(
    'Heading 1',
    <Entry>[
      Entry(
        'Sub Heading 1',
        <Entry>[
          Entry('Row 1'),
          Entry('Row 2'),
          Entry('Row 3'),
        ],
      ),
      Entry('Sub Heading 2'),
      Entry('Sub Heading 3'),
    ],
  ),
  Entry(
    'Heading 2',
    <Entry>[
      Entry('Sub Heading 1'),
      Entry('Sub Heading 2'),
    ],
  ),
  Entry(
    'Heading 3',
    <Entry>[
      Entry('Sub Heading 1'),
      Entry('Sub Heading 2'),
      Entry(
        'Sub Heading 3',
        <Entry>[
          Entry('Row 1'),
          Entry('Row 2'),
          Entry('Row 3'),
          Entry('Row 4'),
        ],
      ),
    ],
  ),
];

Define entry class consists of a title and list of children on expanded and initialize them with a help of a constructor.

class Entry {
  Entry(this.title, [this.children = const <Entry>[]]);

  final String title;
  final List<Entry> children;
}

Define a widget build tiles to populate and return the data in the form of a Widget i.e., ListTile and ExpansionTile where again we provide title and children info there.

Widget _buildTiles(Entry root) {
  if (root.children.isEmpty) return ListTile(title: Text(root.title));
  return ExpansionTile(
    key: PageStorageKey<Entry>(root),
    title: Text(root.title),
    children: root.children.map(_buildTiles).toList(),
  );
}

Clickable :

To make the elements clickable add onTap functionality inside the ListTile as below

ListTile(
  title: Text(''),  // title 
  onTap: (){}, // OnClick Functionality
),

FullCode :

Providing the full code for flutter expandable listview integration.

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Expandable ListView'),
        ),
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) =>
              EntryItem(data[index]),
          itemCount: data.length,
        ),
      ),
    );
  }
}


class Entry {
  Entry(this.title, [this.children = const <Entry>[]]);

  final String title;
  final List<Entry> children;
}

final List<Entry> data = <Entry>[
  Entry(
    'Heading 1',
    <Entry>[
      Entry(
        'Sub Heading 1',
        <Entry>[
          Entry('Row 1'),
          Entry('Row 2'),
          Entry('Row 3'),
        ],
      ),
      Entry('Sub Heading 2'),
      Entry('Sub Heading 3'),
    ],
  ),
  Entry(
    'Heading 2',
    <Entry>[
      Entry('Sub Heading 1'),
      Entry('Sub Heading 2'),
    ],
  ),
  Entry(
    'Heading 3',
    <Entry>[
      Entry('Sub Heading 1'),
      Entry('Sub Heading 2'),
      Entry(
        'Sub Heading 3',
        <Entry>[
          Entry('Row 1'),
          Entry('Row 2'),
          Entry('Row 3'),
          Entry('Row 4'),
        ],
      ),
    ],
  ),
];


class EntryItem extends StatelessWidget {
  const EntryItem(this.entry);

  final Entry entry;

  Widget _buildTiles(Entry root) {
    if (root.children.isEmpty) return ListTile(title: Text(root.title));
    return ExpansionTile(
      key: PageStorageKey<Entry>(root),
      title: Text(root.title),
      children: root.children.map(_buildTiles).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

Flutter Expandable Listview Output :

This screen below depicts the usage of flutter expandable listview

If there are any query’s in the tutorial on Expandable listview do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.