Exploring Shimmer Effect | A Flutter Guide

Manipulating the afterward of Local or HTTP Responses is yet another great way of designing applications. Sometimes, or let’s say more often we tend to display CircularProgressIndicators for handling response(s). In this article, we are going to explore the Shimmer effect which has its own uniqueness and acts as an addition to an attractive User Interface. Let’s explore then.

This is the effect we’re going to develop with Shimmer

Table of Content

Install-Package

Implementation

Install-Package

Under Project terminal, add this command

flutter pub add shimmer

It will install the necessary one w.r.t your Flutter version.

Import this package like

import 'package:shimmer/shimmer.dart';

Implementation

Before we make use of this package let’s first develop our UI.

Have a look at the below snippet.

Widget buildView(BuildContext context) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: 33,
    itemBuilder: (_, i) {
      return Padding(
        padding: const EdgeInsets.all(2),
        child: Stack(
          fit: StackFit.loose,
          clipBehavior: Clip.none,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: 100,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      "https://cdn.99images.com/photos/wallpapers/3d-abstract/abstract-forest%20android-iphone-desktop-hd-backgrounds-wallpapers-1080p-4k-swrhr.jpg"),
                  fit: BoxFit.cover,
                  opacity: 0.1,
                ),
              ),
              child: const FlutterLogo(),
            ),
            Container(
              width: 30,
              height: 30,
              color: Colors.red,
              child: const Align(
                alignment: Alignment.center,
                child: Text(
                  "1",
                  style: TextStyle(color: Color(0xffffffff)),
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                  ),
                  onPressed: () {},
                  child: const Text("Show more...")),
            ),
          ],
        ),
      );
    },
  );
}

Here, I have used Stack and defined Widgets separately so we would get an attractive effect with Shimmer.

Now it’s time to define Shimmer.

Shimmer required properties

baseColor

highlightColor

child

Since the above function loads static Listview so we need to turn off the shimmer effect as well, so we have another property as,

enabled (bool)

Creating a variable of type<bool> that would handle the ON / OFF process.

bool enabled = true;

Secondly, creating a function that would return Shimmer with this effect.

Widget buildEffect(BuildContext context) {
  return Shimmer.fromColors(
          enabled: enabled,
          baseColor: Colors.grey.shade300,
          highlightColor: Colors.grey.shade100,
          child: buildView(context));
}

Now all set, we need to just handle the ON / OFF process. Upon modifying our UI,

Widget buildView(BuildContext context) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: 33,
    itemBuilder: (_, i) {
      return InkWell(
        child: Padding(
          padding: const EdgeInsets.all(2),
          child: Stack(
            fit: StackFit.loose,
            clipBehavior: Clip.none,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: 100,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        "https://cdn.99images.com/photos/wallpapers/3d-abstract/abstract-forest%20android-iphone-desktop-hd-backgrounds-wallpapers-1080p-4k-swrhr.jpg"),
                    fit: BoxFit.cover,
                    opacity: 0.1,
                  ),
                ),
                child: const FlutterLogo(),
              ),
              Container(
                width: 30,
                height: 30,
                color: Colors.red,
                child: const Align(
                  alignment: Alignment.center,
                  child: Text(
                    "1",
                    style: TextStyle(color: Color(0xffffffff)),
                  ),
                ),
              ),
              Positioned(
                bottom: 0,
                right: 0,
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.red,
                    ),
                    onPressed: () {},
                    child: const Text("Show more...")),
              ),
            ],
          ),
        ),
        onTap: () => setState(() => enabled = !enabled),
      );
    },
  );
}

I have added InkWell so we could get onTap event.

And for Shimmer, modifying with a condition as

Widget buildEffect(BuildContext context) {
  return !enabled
      ? buildView(context)
      : Shimmer.fromColors(
          enabled: enabled,
          baseColor: Colors.grey.shade300,
          highlightColor: Colors.grey.shade100,
          child: buildView(context));
}

We’re all done, it’s time to run our application.

Congrats! We have successfully implemented the Shimmer effect on Flutter.

That’s all!

If you found this one quite insightful then 👏.

Feel free to ask your queries here or on Twitter. I will try my best to respond asap.

P.S. I do have my own YouTube Channel where I upload content related to Flutter Series and GitHub etc. If you find your type of stuff then LIKE, SHARE & SUBSCRIBE as it motivates me to create more for you! Thanks.

Mustafa Tahir

mustafatahirhussein — Overview

Remember me in your Prayers.