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 126.96.36.199 release ready!
In this article, we are going to discuss about the Shimmer Effects in Flutter which is really an attractive placeholder for loading animation while fetching large amount of content from server or local database to user interface.
Check our Flutter app development services page.As per our application’s requirement we can change its colour effects, shimmer animation speed, direction accordingly. Here, we will create a simple mobikul shimmer effect application to understand the complete flow of shimmer plugin for a listview.builder widget.
1. Project setup:
Create a new flutter project and add latest shimmer library version under dependency in your pubspec.yaml file like following example and run flutter pub get command to install this library in your project.
2. Import package:
Add the following line in your class to import the package.
3. Create your Shimmer effect view:
Now, you can use following code to show the shimmer effects and create a simple simmer effects view in flutter.
4. Control Shimmer Effect
Shimmer widget has following properties which can be used for controlling the shimmer effects in flutter.
baseColor: Background color of loading effect.
highlightColor: Shimmer effect color.
Enabled: To start or stop the shimmer animation.
period: To control the speed of shimmer animation.
direction: To control the direction of shimmer animation flow(right to left, left to right, top to bottom, bottom to top).
loop: To set the number of animation loop. Set the value to 0 to make the animation run continuously.
child: child property is used to render a widget under shimmer animation.5. Output:As a result, you will get the following output as attached video.
In this article, we have learned shimmer effects in flutter application using shimmer plugin.
Thanks for reading the blog. For more such amazing articles on latest trends in mobile application development please visit our mobikul blog site.
Happy coding 🙂
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.