Shimmer Effect in Flutter – Awesome Flutter Plugins
Shimmer Effect is a very famous Text effect introduced as part of the IOS environment. In this article, we will look at how to bring that to the Flutter Application.
To begin with, we will make use of this Awesome Flutter Plugin – Shimmer 1.0.0
Add the following to the dependency –
dependencies: shimmer: ^1.0.0
Once done, time to import the following line into the main.dart file.
Shimmer – Basics
The shimmer effect is fairly straight forward. Make use of only one class in your Widget tree and the work is done. If you do not know how the shimmer effect actually works, check the below GIF to understand.
To perform the same effect as above, we will jump into the Widget definition. Make use of the class,
shimmer in your Widget tree! There is one option to do this like given below,
Once this is done, we will have to fill out the properties to finalize the application.
Shimmer.fromColors – Properties
The Shimmer.fromColors consist of the following properties.
- baseColor – Base Color of the Shimmer that gets shown on the Widget. This color is primary as the child widget will be of this color only.
- highlightColor – Highlight Color is the color that produces the shimmer like effect. This color keeps waving across the child widget and it creates the Shimmer like effect. To find more about this check out the example program in the next section.
- child – The Child holds whatever widget has to produce the ShimmerEffect. Could be a Text Widget or any complex structure and the ShimmerEffect is produced without any problem! Check out the next section to see more about this attribute and how to use it across complex Widgets
Shimmer – Example App
The code below produces the ShimmerEffect for two important widgets, the Text Widget and the Column of ListView Widget. To know how the app looks do not forget to check the next section for the app output.
Shimmer Effect – Conclusion
The above two screens are examples only and a lot more can be performed by merely changing the child Widget alone. Drop any comments in the section below!
“Learn and Be Curious”