Check Mobile App
Read now
Start a Project

Shimmer Effect in Flutter

Save

What is Shimmer Effect in Flutter?

The Shimmer effect is a wonderful animation effect that we can use when the actual content is loading in the background.

In short, you can use this in the place of traditional progress bars or loaders. It will definitely make your application more attractive and decent.

As a result, it will definitely more satisfy users than any traditional progress bar or loader. It’s very common to show loading impact in applications for hiding the loading data in the background.

Properties

Some properties of the Shimmer effect :

baseColor-> Base color is the first color that will show over the Shimmer widget and shimmering starts from base color.

highlightColor-> It is the color that shows shimmer animation effect over base color. It continues in the form of waves over the child widget.

child-> Child holds the widget on which the shimmer effect is implemented.

direction-> In this, we can simply manage the direction of the shimmering wave highlightColor from right to left, left to right, bottom to top, or start to end.

period-> Actually period controls the speed of the animation. The default speed is 1500 milliseconds.

Implementation of Shimmer Effect

Let’s see how simply we can implement the shimmer effect in flutter application. First of all, I have to write code for the main class it’s a main thread of the app and does not contain anything related to the shimmering effect. Let’s check the below code.

main.dart

Homepage.dart

And this is my homepage dart file that contains all the code related to the UI part and shimmering animation effect part. In this, as you see I use very simple code to understand and easy to implement. So, in this code, I used an identifier isLoading to change view after a time duration.

And simply use a ListView.builder to show multiple lines of content. As a result see when the app is loaded shimmering effect will start till the time duration and after that, it shows actual data. Let’s see the code.

Images using Shimmer Effect

Conclusion

In conclusion, we can make our app more attractive, beautiful, and animated by using shimmering effects.

I hope this blog will help you to learn about Shimmer Effect and you will be able to implement it. And you can also take references from here.

For more blogs click here

Happy Learning ✍️

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

Excellent work, fast, good quality and understood the brief perfectly! Quick responses developing the project and very good cooperation. I suggest to anyone.

Stathis Plakidas

Stathis Plakidas

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home