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:
- Add the expansion_tile_card dependency to the pubspec.yaml file
- Import the dependency to the main.dart file
- Add the asset that is to be used in the src/assets/ directory
- Create a basic app structure
- Create a Homepage to the app
- Call the ExpansionTileCard in the body of the app
- Assign content to the Expansion Card
Now, let’s look into the steps in detail.
Adding the Dependency:
Add the expansion_tile_card dependency to the dependencies section of the pubspec.yaml file as shown below:
Importing the Dependency:
Use the below line of code to add the expansion_tile_card to the main.dart file:
Adding the Asset:
At this stage, we will create an assets directory inside the root directory of the project that will hold the image which will be shown when the card expands. it would somewhat look like below:
Note: Activate the assets in the assets section of the pubspec.yaml file to use it in the application.
Structuring the Application:
Create a Class Myapp and extend it through a StatelessWidget and build the root of the application as shown below:
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:
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:
Complete Source Code: