Flutter – Expansion Card

The expansion_card package is used to easily implement Expandable cards in Flutter.  Images and GIFs can also be used as a background to enhance the beauty of the card, which would expand when the card is expanded. The Expansion card has a wide range of properties that can be manipulated to changes the effects of the expansion card. In this article, we will look into the properties and implementation of the Expansion card.

Properties of Expansion Card:

• background: It is used to set the background of the card.
• borderRadius: it set the radius of the card.
• leading: it sets the action after the slide of the card.
• gif: Path to the GIFs used in the card.
• onExpansionChanged: Sets the properties of the expanded card.
• trailing: A widget used to replace the rotating arrows.
• initiallyExpanded: Sets the initial state of the card.

Now, let’s look into its implementation through a simple example. For it, we will be building a simple app and implementing the Expansion card into it. to do so follow the below steps:

• Add the expansion_card dependency to the pubspec.yaml file.
• Import the dependency to the main.dart file.
• Structure a basic app for further implementation of the expansion card.
• Call the ExpansionCard method in the body of the app
• Set up the properties while the card is shrunk and expanded respectively.

Now, let’s look into the steps in detail.

Adding the Dependency:

To add the expansion_card dependency into the dependencies section of the pubspec.yaml file follows the below image: 

Importing the Dependency:

To add the dependency to the main.dart file, use the below line of code:

import 'package:expansion_card/expansion_card.dart';

Structuring the Application:

Create a Class (say, Myapp) and extended it through a Stateless Widget to establish the root of the application. Follow this by extending another class (say, MainApp) through a StatelessWidget to provide an appbar and a body to the application as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainApp());
  }
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,

          // content of the app goes here
          body:
    );
  }
}

Calling the ExpansionCard:

In the body of the MainApp Class make a call to the ExpansionCard as shown below:

Dart

Center(
           child: ExpansionCard(
               ),
             ),

Setting Expansion Card Properties:

Now design how the Expansion card is supposed to function at this stage inside the ExpansionCard widget. Here we will use the GeeksForGeeks logo as a background of the card with the main text that is shown during the shrunk stage and a secondary text when the card expands.

Dart

body: Center(
           child: ExpansionCard(
             borderRadius: 20,
             background: Image.asset(
               "assets/gfg.png",
               fit: BoxFit.cover,
             ),
             title: Container(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   Text(
                     "GeeksForGeeks",
                     style: TextStyle(
                       fontSize: 30,
                       color: Colors.black,
                     ),
                   ),
                   Text(
                     "A Computer Science Portal",
                     style: TextStyle(fontSize: 20, color: Colors.black),
                   ),
                 ],
               ),
             ),

Complete Source Code:

Dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainApp());
  }
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
            child: ExpansionCard(
              borderRadius: 20,
              background: Image.asset(
                "assets/gfg.png",
                fit: BoxFit.cover,
              ),
              title: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "GeeksForGeeks",
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.black,
                      ),
                    ),
                    Text(
                      "A Computer Science Portal",
                      style: TextStyle(fontSize: 20, color: Colors.black),
                    ),
                  ],
                ),
              ),
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 7),
                  child: Text("Main Content",
                      style: TextStyle(fontSize: 20, color: Colors.black)),
                )
              ],
            )));
  }
}

Output: