April 20, 2021

How to add shimmer effect in Flutter

By Mohit Agrawal

Let’s shimmer the UI when it’s loading

Hello devs 👋 , welcome back to another Flutter Tutorial. Today we are going to learn what is shimmer effect and what all we can do using it. This tutorial is specially designed for those who really want to learn the basis of Flutter mobile development.

What is the shimmer effect?

Usually whenever we open an app then we see a loading effect with a nice animation. It indicates that the app loading the data either from the server or the local database. There are many ways to show this loading effect.

android lottie progress bar 1

Many developers prefer to use progress indicator as well. We are going to use another method which is shimmer effect. In this we usually animate the widget which exactly look like the original widget after loading the data.

shimmer_effect_flutter_1

So if you want to use the shimmer effect while loading the list of items from the server then you need to create a dummy list of items. And the shape and size of the dummy list row should exactly look like the original row with data. Got confused 😵? No problem, Let’s start with an example.

How to use the shimmer effect in Flutter?

Believe me, if you are a Flutter developer then your life is much easier than native iOS and android developers. It is because in Flutter you get the plugin for almost everything 😬.

We are going to use the Shimmer plugin. Now let’s see how to use it in Flutter project.

Open the pubspec.yaml and add the latest dependency.

dependencies:
  shimmer: ^2.0.0

Now run the command Pub get to install it.

That’s all. You are ready to use it now. Let see a small example of it.

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

If you run the above code then you will see the animated text as shown below.

shimmer_effect_flutter_2

Now it’s time to understand the code. As you can see I am using the widget Shimmer.fromColors and adding the Text as the child. It has two more properties.

  • baseColor: You need to give the actual color of the text without animation.
  • highlightColor: The color of the animation which you want to will be shimmering.

Implementation of Shimmering or Skeleton animation in List

In order show this type of effect we need to create a dummy list then we will wrap it inside the Shimmer.fromColors widget.

I have written a method dummyListViewCell() which will return a skeleton of the row. Here is the code.

Widget dummyListViewCell() {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 48.0,
            height: 48.0,
            color: Colors.white,
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: double.infinity,
                  height: 8.0,
                  color: Colors.white,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 2.0),
                ),
                Container(
                  width: double.infinity,
                  height: 8.0,
                  color: Colors.white,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 2.0),
                ),
                Container(
                  width: 40.0,
                  height: 8.0,
                  color: Colors.white,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

Now we need to create a list builder and then we need to use the above method in it.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: ListView.builder(itemBuilder: (_, __) => (
              dummyListViewCell()
          ),
            itemCount: 10,
          ),
        ),
      )
    );
  }

I am using the itemCount as 10. It means it will display 10 dummy rows. You can increase or decrease it as per your need.

Here is the complete code.

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: ListView.builder(itemBuilder: (_, __) => (
              dummyListViewCell()
          ),
            itemCount: 10,
          ),
        ),
      )
    );
  }

  // A Separate Function called from itemBuilder
  Widget dummyListViewCell() {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 48.0,
            height: 48.0,
            color: Colors.white,
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: double.infinity,
                  height: 8.0,
                  color: Colors.white,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 2.0),
                ),
                Container(
                  width: double.infinity,
                  height: 8.0,
                  color: Colors.white,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 2.0),
                ),
                Container(
                  width: 40.0,
                  height: 8.0,
                  color: Colors.white,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Run the above code and you will see the shimmer effect in the list widget.

shimmer_effect_flutter_1

Video Tutorial

Conclusion

This is not the end. You can add this effect on any widget. For an example you are fetching profile image of the user from the server then in the meanwhile you can add this effect on the image widget.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!