Open In App

Flutter - Expansion Tile Card

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
15 Likes
Like
Report

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:



D

ddeevviissaavviittaa
Improve
Article Tags :

Explore

Lightbox