Open In App

Flutter – Expansion Tile Card

Improve
Improve
Like Article
Like
Save
Share
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:

  • 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.

Adding the Dependency:

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

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';

Adding the Asset:

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.

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'),
    );
  }
}


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({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:
      ),
    );
  }


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.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:



Last Updated : 15 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads