Shimmer Container in Flutter

A Shimmer Container is the fade-in and fade-out effect, We can show it instead using CircularProgressIndicator or Linear progress indicator that looks decent. While fetching the data from the API or from the database we need to wait as it is an asynchronous process, we need to do something on the user screen, shimmer containers do that job for use further if we got the data we will show them.

A sample output gives you an idea of what we are going to implement in this article:

How to Use:

Dart

ShimmerContainer(
    height: 80, // height of container
    width: double.maxFinite, // width of container
    radius: 4, // corner radius of container
    highlightColor: Color(0xffF9F9FB), // color of container
    baseColor: Color(0xffE6E8EB),
);

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml file

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder. 

From the command line:

flutter pub add shimmer_container

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Step 3: Import the package into the main file

import 'package:shimmer_container/shimmer_container.dart';
import 'package:flutter/material.dart';

void main() {
    runApp(RunMyApp());
}

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 4: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut for Creating Stateless or Stateful Widgets:

You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatelessWidget {
    const RunMyApp({super.key});

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home:
        );
    }
}

Step 5: Working with the Body of the Scaffold

In the body of the scaffold use the column widget that will contain the multiple children, now we can use various functions called to show the numerous shimmer containers.

 Scaffold(
    appBar: AppBar(
        title: Text('Shimmer Container'),
    ),
    body: Column(
        children: [
            Shimmer(),
            SizedBox(
                height: 2,
            ),
            Shimmer(),
                SizedBox(
                    height: 2,
                ),
            Shimmer(),
                SizedBox(
                    height: 2,
                ),
            Shimmer(),
                SizedBox(
                    height: 2,
                ),
            Shimmer(),
        ],
    ),
),

As you saw we call the Shimmer method (not defined yet) to show multiple shimmer containers. Now create the Shimmer method.

Step 6: Define the Shimmer Function

Widget Shimmer() {
    return ShimmerContainer(
        height: 80,
        width: double.maxFinite,
        radius: 4,
        highlightColor: Color(0xffF9F9FB),
        baseColor: Color(0xffE6E8EB),
    );
}

This function returns the widget ShimmerContainer with height,  width, radius, highlightColor, and baseColor.

Complete Code:

Dart

import 'package:flutter/material.dart';
import 'package:shimmer_container/shimmer_container.dart';

void main() {
    runApp(RunMyApp());
}

class RunMyApp extends StatelessWidget {
    const RunMyApp({
        super.key
    });

    Widget Shimmer() {
        return ShimmerContainer(
            height: 80,
            width: double.maxFinite,
            radius: 4,
            highlightColor: Color(0xffF9F9FB),
            baseColor: Color(0xffE6E8EB),
        );
    }

    @
    override
    Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: ThemeData(primarySwatch: Colors.green),
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Shimmer Container'),
                ),
                body: Column(
                    children: [
                        Shimmer(),
                        SizedBox(
                            height: 2,
                        ),
                        Shimmer(),
                        SizedBox(
                            height: 2,
                        ),
                        Shimmer(),
                        SizedBox(
                            height: 2,
                        ),
                        Shimmer(),
                        SizedBox(
                            height: 2,
                        ),
                        Shimmer(),
                    ],
                )
            ),
        );
    }
}

Output: