How to give Shimmer Effect in Flutter App in 2 Steps.

Hey, everyone back again with a new blog today we are going to learn how we can put Shimmer effect in our app.

Firstly let us see what is shimmer effect, the image/GIF given below has a shimmer effect on the text “Slide to unlock” is the shimmer effect.

We have mostly seen this type of effect on our Facebook when some news feed takes time to load or there is any network issue so this effect may be used.

So let us dive right into our coding part and see how to we can do so.

Step 1

Firstly we have to install dependency in our pubsec.yaml file

shimmer: // Please check the version at your time of installation

Step 2

Secondly, we have to just place Shimmer as a widget inside our widget tree with some of its properties like background color and highlight color and also one child on which our effect will be shown.

Shimmer.fromColors(
    child:  ListTile(
      title: Text("Hii every one this is title $i ",style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold),),
      subtitle: Text(i.toString()),
    ),
    baseColor:Colors.black,
    highlightColor: Colors.grey
)// This is a snapshot from my github repo

If everything goes correctly you will see something like this:-

That's it you have successfully learned how to use Shimmer effect in our app.

Github link of the above code is:- https://github.com/akarshbarar/Shimmer_Effect_In_Flutter

Make sure to subscribe to my YouTube Channel :

https://youtu.be/yWSdXqf_2k4

And follow on Instagram:

@mycodecave

Also on Facebook :

https://www.facebook.com/CodeCave-299370007293562

If you liked the content Don't forget to like to share with your friends.

See You all in the next Blog.