Flutter - Expansion Card - GeeksforGeeks

15 Feb, 2021
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.
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.
To add the expansion_card dependency into the dependencies section of the pubspec.yaml file follows the below image: 
To add the dependency to the main.dart file, use the below line of code:
import 'package:expansion_card/expansion_card.dart';

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:     );  }}
In the body of the MainApp Class make a call to the ExpansionCard as shown below:
Dart
Center(           child: ExpansionCard(               ),             ),
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
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:
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs