Flutter - Expansion Tile Card - GeeksforGeeks

15 Feb, 2021
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:
Add the expansion_tile_card dependency to the pubspec.yaml file
Import the dependency to the main.dart file
Add the asset that is to be used in the src/assets/ directory
Create a basic app structure
Create a Homepage to the app
Call the ExpansionTileCard in the body of the app
Assign content to the Expansion Card
Now, let’s look into the steps in detail.
Add the expansion_tile_card dependency to the dependencies section of the pubspec.yaml file as shown below:
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';

At this stage, we will create an assets directory inside the root directory of the project that will hold the image which will be shown when the card expands. it would somewhat look like below:
Note: Activate the assets in the assets section of the pubspec.yaml file to use it in 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'),    );  }}
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({Key key, this.title}) : super(key: key);    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:      ),    );  }
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.centerLeft,                 child: Padding(                   padding: const EdgeInsets.symmetric(                     horizontal: 16.0,                     vertical: 8.0,                   ),                   child: Image.asset('assets/gfg.png')                 ),               ),
Complete Source Code:
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,      ),      home: MyHomePage(title: 'GeeksForGeeks'),    );  }}  class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);    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: 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.centerLeft,                  child: Padding(                    padding: const EdgeInsets.symmetric(                      horizontal: 16.0,                      vertical: 8.0,                    ),                    child: Image.asset('assets/gfg.png')                  ),                ),              ],            ),          ),    ]      ),    );  }}
Output:
android
Flutter
Flutter UI-components
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - DropDownButton Widget
Dart - Null Aware Operators
Flutter - Creating Bottomsheet GetX Library
Data Enumeration in Dart
How to Check String is Empty or Not in Dart (Null Safety)?
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget