How to Create Custom Flutter Shimmer Animation

Design Flutter custom shimmer animation widget a step-by-step guide with example code to use in your app.

Ujjwal Bhardwaj

Oct 13, 2021 • 5 min read

Flutter Shimmer is basically used to add effective flutter animations while the content is loading. This enhances the look of the UI and makes it more responsive. We can use the shimmer animation effect by using the Flutter Shimmer package available for flutter applications.

So, are you ready to make use of this widget package in the Flutter application? It adds styling to your component. This Flutter widget enhances the look of the widgets. If so, then let's quickly jump into the usage and the ways a Shimmer can be modified and used to make user-friendly apps. Here I am going to use an open-source UI Library known as GetWidget to build this Shimmer widget in Flutter. Inside scaffold, this can be designed, so before creating this we need to create a page with the scaffold.

Design Custom Flutter Shimmer with GFwidget

GFShimmer is a Flutter Shimmer that adds beautiful animations while the content is loading from the servers. It enhances the look and feels of the content or we can say the widget. We can also use shimmer by giving Linear Gradient for a more visual shimmer effect or just by adding Main Colour and Secondary Color for the basic shimmer effect. It has customization options which is an easy way to handle it as per the application and its requirements.

How to Get Started with Flutter Shimmer

Now here is the guide about how we should start developing the GFShimmer Widget with the use of the GetWidget UI Library.

First, Let go with Getting started, It will guide you on how to start building a beautiful flutter application UI with the GetWidget UI library. Now, we have to install the GetWidget package from the pub.dev and use our 1000+ inbuilt Widget. To import the package in your Flutter project follow the below guide.

Install Package from pub.dev :

https://pub.dev/packages/getwidget - Check the details about GetWidget Package.

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 4.0.0

Keep playing with the pre-built UI components.

Basic Flutter Shimmer in GFWidget

GFShimmer looks like the reflection of a wave or it can also be visualized as a distorted image. The basic GFShimmer code is given below:

import 'package:getwidget/getwidget.dart';

GFShimmer(
  child: shimmerBlock,
),

final Widget shimmerBlock = Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 54,
            height: 46,
            color: Colors.white,
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  width: double.infinity,
                  height: 8,
                  color: Colors.white,
                ),
                const SizedBox(height: 6),
                Container(
                  width: MediaQuery.of(context).size.width * 0.5,
                  height: 8,
                  color: Colors.white,
                ),
                const SizedBox(height: 6),
                Container(
                  width: MediaQuery.of(context).size.width * 0.25,
                  height: 8,
                  color: Colors.white,
                ),
              ],
            ),
          )
        ],
      ),
    );

Flutter Shimmer with Example Code Snippet

Flutter Shimmer with Gradient

GFShimmer gives a Shimmer effect for children with Linear Gradient. The most simple way to design it is to use the gradient property in the desired widget.

The example of GFShimmer Example code is given below:

import 'package:getwidget/getwidget.dart';

GFShimmer(
  child: const Text(
    'GF Shimmer',
    style: TextStyle(fontSize: 50, fontWeight: FontWeight.w800),
  ),
  showGradient: true,
  gradient: LinearGradient(
    begin: Alignment.bottomRight,
    end: Alignment.centerLeft,
    stops: const <double>[0, 0.2, 0.4, 0.8, 1],
    colors: [
     Colors.red,
     Colors.blue,
     Colors.green,
     Colors.orange,
     Colors.black
    ],
  ),
),

Flutter Custom Gradient Shimmer With Example Code Snippet

GF Flutter Shimmer Custom Properties:

We can change the visualization of GFShimmer by customizing it. The look and feel of GFShimmer can be customized using the below properties:

Name	Description
child	The child of type [Widget] to display shimmer effect.
duration	Controls the speed of the shimmer effect. The default value is 1500 milliseconds.
direction	Controls the direction of the shimmer effect. The default direction is GFShimmerDirection.leftToRight.
gradient	Controls the [child]'s shades of color using Linear gradient. Child [Widget] only takes gradient color, If [showGradient] is true.
showShimmerEffect	Controls animation effect, defaults true state that makes animation active.
showGradient	If true, takes gradient color [gradient] for the [child]'s shimmer effect. Default set to false.
shimmerEffectCount	Controls the animation shimmerEffectCount. The default value is '0', that displays child [Widget]'s shimmer effect forever.
mainColor	Defines the main color of the [child]'s shimmer effect. Child [Widget] takes the main color, only if [showGradient] is false. Default [showGradient] will be false.
secondaryColor	Defines the secondary color of the [child]'s shimmer effect. Child [Widget] takes secondary color, only if [showGradient] is false. Default [showGradient] will be false.

Can we fix the direction of the shimmer effect?

Yes, we can add the direction by using the direction property given in the widget. We can use the leftToRight and rightToLeft property respectively.

Can we add a timer for a particular shimmer effect?

Yes, we can add the time duration also by using the duration property. The default duration is 1500 milliseconds.

No, there isn't any specification of the child widgets. We can use all the possible widgets to make the UI look promising.

After adding the gradient property in GFShimmer it still not reflecting the color, Why?

For reflecting the color gradient in the given widget we need to set the [showGradient] to true because it controls the shades of color using Linear Gradient.

What is the use of the mainColor property?

It defines the main color of the shimmer effect. It only displays when[showGradient] is false. The default value of [showGradient] is false. The same goes for the secondaryColor property also.

Flutter Get Widget Docs

Flutter Forum: if any Find any questions let's discuss them on Forum.

GitHub Repository: Please do appreciate our work through Github start

Conclusion:

Here we discuss, what Flutter Shimmer Widget is? And how we can use and implement it into our Flutter app through the GetWidget Shimmer component. Here, there are options to customize the Shimmer.

About Our Team:

We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the Flutter Dev Community.