Flutter - Expansion Tile Card

Last Updated : 03 Mar, 2025

The Expansion Tile Card works similarly to that of the Flutter SDK's standard expansion tile. But it uses the style used by Google itself in its products to raise a tile. It can be called a better version of the Flutter's ExpansionTileCard. In this article, we will look into the process of implementing the Expansion Tile Card in a Flutter application by building a simple flutter app. To build the app follow the below steps:

Steps to implementing the expansion tile card in a flutter application:

Step 1 : Adding the Dependency

Add the expansion_tile_card dependency to the dependencies section of the pubspec.yaml file as shown below:

expansion_tile_card: ^3.0.0

Now try to click on pub get button android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : Importing the Dependency

Use the below line of code to add the expansion_tile_card to the main.dart file:

import 'package:expansion_tile_card/expansion_tile_card.dart';

Step 3 : Structuring the Application

Create a Class Myapp and extend it through a StatelessWidget and build the root of the application as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTileCard',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'GeeksForGeeks'),
    );
  }
}

Step 4 : Creating the Homepage

To create a Homepage to the app create a Class Homepage and extend it through a StatelessWidget and create an Appbar and a body to the application as shown below:

Dart

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key,required this.title});

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ExpansionTileCardState> cardA = new GlobalKey();
  final GlobalKey<ExpansionTileCardState> cardB = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:  //code
      ),
    );
  }

Step 5 : Calling Dependency methods:

The dependency can be called within the body of the Homepage by making a call to the ExpansionTileCard. Action will also be added on Tap to the tile that would lead to the expansion of the tile as shown below:

Dart

ExpansionTileCard( 
			key: cardB, 
			leading: CircleAvatar(child: Text('A')), 
			title: Text('Tap to Expand!'), 
			subtitle: Text('It has the GFG Logo.'), 
			children: <Widget>[ 
				Divider( 
				thickness: 1.0, 
				height: 1.0, 
				), 
				Align( 
				alignment: Alignment.center, 
				child: Padding( 
					padding: const EdgeInsets.symmetric( 
					horizontal: 16.0, 
					vertical: 8.0, 
					), 
					child: Image.network('https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png') 
				), 
				), 
			], 
			),

To know more about the how to display network image refer this article: Display Network Image in Flutter

Complete Source Code: (Main.dart)

Dart

import 'package:flutter/material.dart'; 
import 'package:expansion_tile_card/expansion_tile_card.dart'; 

void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
	return MaterialApp( 
	title: 'ExpansionTileCard', 
	theme: ThemeData( 
		primarySwatch: Colors.green, 
	), 
  debugShowCheckedModeBanner: false,
	home: MyHomePage(title: "GeekForGeeks"), 
	); 
} 
} 
class MyHomePage extends StatefulWidget { 
MyHomePage({super.key, required this.title});

final String title;

@override 
_MyHomePageState createState() => _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> { 
final GlobalKey<ExpansionTileCardState> cardA = new GlobalKey(); 
final GlobalKey<ExpansionTileCardState> cardB = new GlobalKey(); 

@override 
Widget build(BuildContext context) { 
	return Scaffold( 
	appBar: AppBar( 
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
		title: Text(widget.title), 
	), 
	body: ListView( 
		children: <Widget>[ 
		Padding( 
			padding: const EdgeInsets.symmetric(horizontal: 12.0), 
			child: ExpansionTileCard( 
			key: cardB, 
			leading: CircleAvatar(child: Text('A')), 
			title: Text('Tap to Expand!'), 
			subtitle: Text('It has the GFG Logo.'), 
			children: <Widget>[ 
				Divider( 
				thickness: 1.0, 
				height: 1.0, 
				), 
				Align( 
				alignment: Alignment.center, 
				child: Padding( 
					padding: const EdgeInsets.symmetric( 
					horizontal: 16.0, 
					vertical: 8.0, 
					), 
					child: Image.network('https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png') 
				), 
				), 
			], 
			), 
		), 
	] 
	), 
	); 
} 
}

Output:

Icon Class in Flutter

ddeevviissaavviittaa

Improve

Article Tags :

Flutter - Expansion Tile Card

Steps to implementing the expansion tile card in a flutter application:

Step 1 : Adding the Dependency

Step 2 : Importing the Dependency

Step 3 : Structuring the Application

Step 4 : Creating the Homepage

Step 5 : Calling Dependency methods:

Similar Reads

Basics

Key Widgets

UI Components

Design & Animations

Forms & Gestures

Navigation & Routing

Hardware Interaction

Sample Flutter Apps

Advance Concepts

Thank You!

What kind of Experience do you want to share?