Explore Expansion Tile Card In Flutter
A solitary line ListTile with the trailing button expands or collapses the tile to uncover or conceal the children. This widget is normally utilized with ListView to make an “expand/collapse” list section. When utilized with looking over widgets like ListView, an interesting PageStorageKey should be indicated to empower the ExpansionTileCard to save and reestablish its expanded state when it is scrolled all through see.
In this article, we will explore the Expansion Tile Card In Flutter. We will be implementing a demo program of the Expansion Tile Card using the expansion_tile_card package in your flutter application by building a simple flutter application.
expansion_tile_card | Flutter Package
An “expansion” on the Flutter SDK’s standard ExpansionTile, to create a Google Material Theme inspired raised widget…pub. dev
Table Of Contents::
Expansion Tile Card:
The Expansion Tile Card works comparably to that of the Flutter SDK’s standard expansion tile. However, it utilizes the style utilized by Google itself in its items to raise a tile. It very well may be known as a better version of Flutter’s ExpansionTileCard.
Demo Module :
This demo video shows how to create an Expansion Tile Card in a flutter. It shows how the Expansion Tile Card will work using the expansion_tile_card package in your flutter applications. It shows a card; when the user taps a drop-down button, then expanded the card. It will be shown on your device.
Properties:
There are some property of Expansion Tile Card are:
- > shadowColor: This property was the color of the shadow of the card.
- > initiallyExpanded: This property specified if the list tile is initially expanded (true) or collapsed (false, the default).
- > baseColor: This property was the background color of the unexpanded tile. If null, defaults to Theme.of(context).canvasColor.
- > expandedColor: This property was the background color of the expanded card. If null, defaults to Theme.of(context).cardColor.
- > colorCurve: This property was the animation curve used to control the header, icon, and material colors. Defaults to Curves.easeIn.
- > paddingCurve: This property was the animation curve used by the expanding/collapsing padding. Defaults to Curves.easeIn.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
expansion_tile_card:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
assets:
- assets/images/
Step 3: Import
import 'package:expansion_tile_card/expansion_tile_card.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called expansion_tile_card_demo.dartinside the lib folder.
final GlobalKey<ExpansionTileCardState> cardA = new GlobalKey();
First, we will create a globalkey in the bracket we will add an ExpansionTileCardState, add your key name is equal to the new globalkey().
ExpansionTileCard(
baseColor: Colors.cyan[50],
expandedColor: Colors.red[50],
key: cardA,
leading: CircleAvatar(
child: Image.asset("assets/images/devs.jpg")),
title: Text("Flutter Dev's"),
subtitle: Text("FLUTTER DEVELOPMENT COMPANY"),
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: Text(
"FlutterDevs specializes in creating cost-effective and efficient applications with our perfectly crafted,"
" creative and leading-edge flutter app development solutions for customers all around the globe.",
style: Theme.of(context)
.textTheme
.bodyText2
.copyWith(fontSize: 16),
),
),
),
],
),
In the body, we will add ListView(). Inside ListView, we will add ExpansionTileCard(). Inside ExpansionTileCard, we will add the card’s baseColor, add an expandedColor of the card, add a key, add a leading property. In this property, we will add a CircleAvatar() for the image. Now, we will add a title, subtitle, and add children. In the children widget, we will add a divider and text. Wrapped the text to align. The alignment was center. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will add ButtonBar() in ExpansionTileCard().
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
buttonHeight: 52.0,
buttonMinWidth: 90.0,
children: <Widget>[
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
cardA.currentState?.expand();
},
child: Column(
children: <Widget>[
Icon(Icons.arrow_downward),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Open'),
],
),
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
cardA.currentState?.collapse();
},
child: Column(
children: <Widget>[
Icon(Icons.arrow_upward),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Close'),
],
),
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
},
child: Column(
children: <Widget>[
Icon(Icons.swap_vert),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Toggle'),
],
),
),
],
),
In ButtonBar, we will add three FlatButtons. We will add the text ”open,” add down arrow icon, and onPressed() on the first button. All button shape was the rounded rectangular border. On the second button, we will add the text ”close,” add up arrow icon, and onPressed(). On the last button, we will add the text ”toggle,” add swap icon, and onPressed(). When we run the application, we ought to get the screen’s output like the underneath screen capture.
When the user taps the drop-down arrow, then expanded the card. When the user taps the close icon, then collapsed the card and also changed the color in the expanded/collapsed card.
CodeFile:
import 'package:flutter/material.dart';
import 'package:expansion_tile_card/expansion_tile_card.dart';
class ExpansionTileCardDemo extends StatefulWidget {
@override
_ExpansionTileCardDemoState createState() => _ExpansionTileCardDemoState();
}
class _ExpansionTileCardDemoState extends State<ExpansionTileCardDemo> {
final GlobalKey<ExpansionTileCardState> cardA = new GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('ExpansionTileCard Demo'),
),
body: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0,vertical: 20),
child: ExpansionTileCard(
baseColor: Colors.cyan[50],
expandedColor: Colors.red[50],
key: cardA,
leading: CircleAvatar(
child: Image.asset("assets/images/devs.jpg")),
title: Text("Flutter Dev's"),
subtitle: Text("FLUTTER DEVELOPMENT COMPANY"),
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: Text(
"FlutterDevs specializes in creating cost-effective and efficient applications with our perfectly crafted,"
" creative and leading-edge flutter app development solutions for customers all around the globe.",
style: Theme.of(context)
.textTheme
.bodyText2
.copyWith(fontSize: 16),
),
),
),
ButtonBar(
alignment: MainAxisAlignment.spaceAround,
buttonHeight: 52.0,
buttonMinWidth: 90.0,
children: <Widget>[
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
cardA.currentState?.expand();
},
child: Column(
children: <Widget>[
Icon(Icons.arrow_downward),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Open'),
],
),
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
cardA.currentState?.collapse();
},
child: Column(
children: <Widget>[
Icon(Icons.arrow_upward),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Close'),
],
),
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
onPressed: () {
},
child: Column(
children: <Widget>[
Icon(Icons.swap_vert),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2.0),
),
Text('Toggle'),
],
),
),
],
),
],
),
),
],
),
);
}
}
Conclusion:
In the article, I have explained the Expansion Tile Card of basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Expansion Tile Card On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Expansion Tile Card in your flutter projects. We will show you what the Expansion Tile Card is?. Some expansion tile card properties, make a demo program for working Expansion Tile Card and show a card when the user taps a drop-down button, then expanded it. When the user taps the closed button, then the card was collapsed using the expansion_tile_card package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Expansion Tile Card Demo:
flutter-devs/flutter_expansion_tilte_card_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
