Flutter - Shimmer

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.

Steps to implement Shimmer in flutter application

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

dependencies:
 shimmer: ^3.0.0

Now run the below command in terminal.

flutter pub get

Step 2 : Importing the Dependency

Use the below line of code in the main.dart file, to import the shimmer dependency :

import 'package:shimmer/shimmer.dart';

Step 3 : 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, for this follow the code below :

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

To know more about listview in flutter refer this article: ListView Class in Flutter

Complete Source Code (main.dart):

Output: