Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 188.8.131.52 release ready!
Updated 27 April 2023
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.
Check our Flutter app development company page.
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.
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.
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.
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 ✍️
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.