Learn ExpansionTile using these step by step examples in flutter. Here are the examples:

Example 1: Flutter Expansion Tile Examples

Learn how to use the ExpansionTile widget in flutter.

Example 1: ExpansionTile

Here is the demo of this example:

Flutter ExpansionTile 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.

Read Individually.


Categorized in: