Flutter Expansion Tile Examples

Learn how to use the ExpansionTile widget in flutter.

Example 1: ExpansionTile

Here is the demo of this example:

This example will comprise the following files:

• ExpansionTileExample.dart
• sample_data.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Add Dependencies.

Step 4: Write Dart Code

Write your code as follows:

*(a). ExpansionTileExample.dart

Create a file Dart named ExpansionTileExample.dart

Here is the full code

import 'package:flutter/material.dart';
import 'package:flutter_playground/ui/expansion_tile/sample_data.dart';
final List<SampleData> data = <SampleData>[
  SampleData(
    "Food & Beverages",
    <SampleData>[
      SampleData(
        "Drinks",
        <SampleData>[
          SampleData("Tea"),
          SampleData("Coffee"),
          SampleData("Juices"),
        ],
      ),
      SampleData("Street food"),
    ],
  ),
  SampleData(
    "Fashion",
    <SampleData>[
      SampleData("Men's fashion"),
      SampleData("Women's fashion"),
    ],
  ),
  SampleData(
    "TVs & Appliances",
    <SampleData>[
      SampleData("Television"),
      SampleData("Washing Machine"),
      SampleData(
        "Kitchen Appliances",
        <SampleData>[
          SampleData("Microwave Ovens"),
          SampleData("Oven Toaster Grills (OTG)"),
          SampleData("Juicer/Mixer/Grinder"),
        ],
      ),
    ],
  ),
];
class ExpansionTileExample extends StatelessWidget {
  final String title;
  const ExpansionTileExample(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) => Item(data[index]),
        itemCount: data.length,
      ),
    );
  }
}
// Displays one Entry. If the entry has children then it's displayed
// with an ExpansionTile.
class Item extends StatelessWidget {
  const Item(this.sample);
  final SampleData sample;
  Widget _buildTiles(SampleData root) {
    if (root.children.isEmpty) return ListTile(title: Text(root.title));
    return ExpansionTile(
      key: PageStorageKey<SampleData>(root),
      title: Text(root.title),
      children: root.children.map(_buildTiles).toList(),
    );
  }
  @override
  Widget build(BuildContext context) {
    return _buildTiles(sample);
  }
}

*(b). sample_data.dart

Create a file Dart named sample_data.dart

Here is the full code

class SampleData {
  SampleData(this.title, [this.children = const <SampleData>[]]);
  final String title;
  final List<SampleData> children;
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.