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