Hi Guys, Welcome to Proto Coder Point, In this Flutter Tutorial will use Shimmer Effect flutter library to show/display loading content effect before showing the actual data.

To achieve this we will make use of Flutter Package Called shimmer

Learn more about this Library from Official site

What is Shimmer Effect ?

A Shimmer Effect is just an shine effect on any of the View like text, images or any widget.

Shimmer is one of the flutter package library that is one of the easiest way to add an shimmer effect to any widget in flutter.

Now a day it is mostly used as loading indicator, i,e is to show loading content effect.

Video Tutorial

FINAL OUTPUT

Flutter Shimmer Effect library gif image example

Ok let’s begin adding the Library in our flutter project

Step 1: Create a new Flutter Project

I am making use of android studio as my IDE to build Flutter Application

Create new Flutter project > Give a name as “Flutter Shimmer Effect”

or if you already have existing flutter project then just open it.

Step 2: Add the Required Dependencies

On the Left side you may see project section navigate towords it and just open pubspec.yaml file  and add the following shimmer library dependencies as show below

dependencies:
  shimmer: ^1.1.1    #library for Shimmer effect

after adding the dependencies you need to click on “pub get”,what this does is, it will download all the required package class file into your flutter project.

Step 3: Import the shimmer.dart package

Once you have added the dependencies in your project now ou can easily use those library classes just by importing the shimmer.dart file, wherever required.

import 'package:shimmer/shimmer.dart';

Snippet code how to use shimmer widget in flutter

SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 400.0,
                    child: Shimmer.fromColors(
                      child: Card(
                        color: Colors.grey,
                      ),
                      baseColor: Colors.white70,
                      highlightColor: Colors.grey[700],
                      direction: ShimmerDirection.ltr,
                    ),
),

Output of above snippet code

flutter shimmer gif image

In above Snippet code i have made a sized box with width as screen size available using MediaQuery to get Screen size and Height of box manually specified as 400.0 px

we have some properties that can we used to show shimmer effect:

baseColor: which you can assume as a background color of shimmer effect

highlightColor : which will show you shimmer animation effect, some thing like it is loading content from internet.

direction : you can change the direction of the shimmer highlight color from left to right (ltr) , right to left (rtf), top to bottom (ttb) or bottom to top (btt) , to do so you just need to pass ShimmerDirection with specified direction.

Complete Source code of Flutter Shimmer Effect with loading a image after 5 seconds using Future.delayed function

main.dart

Copy paste the below linked of flutter dart code in main.dart file

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showImageWidget = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // create a future delayed function that will change showInagewidget to true after 5 seconds

    Future.delayed(const Duration(seconds: 5), () {
      setState(() {
        showImageWidget = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Shimmer Effect Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            //if show image widget is true then image will be displayed
            // is show image widgte is false then loading shimmer effect will be show for 5 seconds
            showImageWidget
                ? Image.network(
                    "https://i.pinimg.com/564x/1b/30/80/1b30806bed30a7d071752948d00e75f8.jpg",
                    width: MediaQuery.of(context).size.width,
                    height: 400.0,
                    fit: BoxFit.fill,
                  )
                : SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 400.0,
                    child: Shimmer.fromColors(
                      child: Card(
                        color: Colors.grey,
                      ),
                      baseColor: Colors.white70,
                      highlightColor: Colors.grey[700],
                      direction: ShimmerDirection.ltr,
                    )),
            Text(
              "Shimmer Effect Example in flutter using Shimmer Flutter Library",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            )
          ],
        ),
      ),
    );
  }
}

This Code is just for demo purpose

Here i have set a boolean value for showImageWidget = false

then, i have used a Future.delayed() function that will wait for 5 seconds then change showImageWidget = true,

So when showImageWidget  is false app will display shimmer loading effect and when showImageWidget becomes true after 5 second Image widget will be loaded on screen.

RELATED ARTICLESMORE FROM AUTHOR