Shimmer Effects in Flutter

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.

Let’s start implementation of Shimmer effects in flutter application.

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.

Conclusion:

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 🙂