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.

Flutter Shimmer Widget
Flutter Shimmer Widget

Flutter Shimmer is basically used to add effective 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 requirement.

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: ^ 2.0.4

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:

Flutter Shimmer with Example Code Snippet
Flutter Shimmer with Example Code Snippet
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 gradient property in the desired widget.

The example of GFShimmer Example code is given below:

Flutter Custom Gradient Shimmer With Example Code
Flutter Custom Gradient Shimmer With Example Code
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:

NameDescription
childThe child of type [Widget] to display shimmer effect.
durationControls the speed of the shimmer effect. The default value is 1500 milliseconds.
directionControls the direction of the shimmer effect. The default direction is GFShimmerDirection.leftToRight.
gradientControls the [child]'s shades of color using Linear gradient. Child [Widget] only takes gradient color, If [showGradient] is true.
showShimmerEffectControls animation effect, defaults true state that makes animation active.
showGradientIf true, takes gradient color [gradient] for the [child]'s shimmer effect. Default set to false.
shimmerEffectCountControls the animation shimmerEffectCount. The default value is '0', that displays child [Widget]'s shimmer effect forever.
mainColorDefines 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.
secondaryColorDefines the secondary color of the [child]'s shimmer effect. Child [Widget] takes secondary color, only if [showGradient] is false. Default [showGradient] will be false.
GF Flutter Shimmer
GF Flutter Shimmer gives a shimmery effect for the child, that can be used to indicate a loading status. GF Shimmer for a better design and user interface.

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.

Is there any specific child widget that we can use in the shimmer effect?

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 GetWidget Docs
Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.

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

GetWidget- A Flutter Developer Forum
Flutter largest Open-Source Flutter UI Library with in-built widgets.

GitHub Repository: Please do appreciate our work through Github start

GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app. - GitHub - ionicfirebaseapp/getwidget: Most popular and easy to use open source UI library with 1000+ W...

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.