Flutter - Expansion Tile Card

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:

Steps to implementing the expansion tile card in a flutter application:

Step 1 : Adding the Dependency

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

expansion_tile_card: ^3.0.0

Now try to click on pub get button android studio or visual studio code or run the below command in terminal.

flutter pub get

Step 2 : 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';

Step 3 : Structuring the Application

Create a Class Myapp and extend it through a StatelessWidget and build the root of the application as shown below:

Step 4 : 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:

Step 5 : 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:

To know more about the how to display network image refer this article: Display Network Image in Flutter

Complete Source Code: (Main.dart)

Output: