Related Articles

Related Articles

Flutter – Expansion Card
  • Last Updated : 31 Oct, 2020

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

dependency



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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Calling the ExpansionCard:

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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

Center(
           child: ExpansionCard(
               ),
             ),

chevron_right


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 GeeksFoeGeeks 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
                   ),
                 ],
               ),
             ),

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :