Flutter Expansion Tile Card

In this blog post, we will explore how to use the ExpansionTile widget in Flutter to create an expandable list of items in our application. The ExpansionTile widget allows us to create a card-like interface that expands and collapses when tapped.

Creating an Expansion Tile Card

To create an ExpansionTile card in Flutter, we can use the following code as an example

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  final List<String> items = [    'Item 1',    'Item 2',    'Item 3',    'Item 4',    'Item 5',    'Item 6',    'Item 7',    'Item 8',    'Item 9',    'Item 10',  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ExpansionTile(
              title: Text(items[index]),
              children: <Widget>[
                ListTile(
                  title: Text('Details'),
                  subtitle: Text('More details about ' + items[index]),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}​

In this example, we define a list of items and use the ListView.builder widget to create a list of ExpansionTile cards. We use the title property to set the title of each card and the children property to define the content that is displayed when the card is expanded. In this case, we use a ListTile widget to display additional details about each item in the list.