In Flutter, Shimmer is used to add beautiful animations while content is loading from the servers in an application. This makes the UI look more responsive and secures users from leaving a slow internet interaction. It can be used instead of conventional ProgressBar or usual loaders available in the Flutter framework.
In this article, we will look into its implementation by building a simple application. to do so follow the below steps:
- Add the dependency in the pubspec.yaml file
- Import the dependency in the main.dart file
- Use StatefulWidget to structure the application
- Add a loading screen, that doesn’t load to show the shimmer effect
Let’s look into the steps in detail.
Adding the Dependency:
To add the dependency to the pubspec.yaml file, add shimmer as a dependency in the dependencies part of the pubspec.yaml file as shown below:
Importing the Dependency:
Use the below line of code in the main.dart file, to import the shimmer dependency :
Structuring the Application:
A StatefulWidget can be extended to create an appbar and a body. This is the homepage that will further navigate to a loading screen on the click of a button. The loading screen will have a shimmer representation. to do so follow the below:
Creating the Loading Screen:
The loading screen will be an extension of the StatefulWidget. Inside the body of the loading screen, it’s children will have the columns on which the shimmers effect will be implemented as shown below:
Complete Source Code: