Check Mobile App
Read now
Start a Project

Shimmer Effects in Flutter

Save

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.

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.

Shimmer Effects in Flutter

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 🙂

. . .

Leave a Comment

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


Be the first to comment.

css.php

The support is fast and do everything in their power to make it perfect. If you need customization it's also done right away. I had massive research to select Mobikul and now I'm sure it was the right one.

Igor Souza

Igor Souza

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