Custom Loading Shimmer in Flutter — The Easy Way

Custom Loading Shimmer in Flutter

NOTE: This is my first Medium article, any suggestions would be appreciated! :)

When you open the Zomato app, you might come across the beautiful loading view effect till the time the view loads up. This is achieved by using Shimmer effect, made popular by Facebook.

In this article, I’ll walk you through how you can create a similar custom shimmer effect using a simple Post widget in Flutter.

In this example, we will use this shimmer library. So let’s get started!

Installation

1. Add the shimmerdependency to your pubspec.yaml file:

dependencies:
  shimmer: ^1.1.1

2. Run the following command in the terminal to install it:

$ flutter pub get

3. Import the package:

import 'package:shimmer/shimmer.dart';

Implementation

To keep things simple, I haven’t included the profile picture and image embed in our Post widget.

Our post widget will look like this:

A simple Post

In the following part, we will implement a Shimmer for the above Post.

This article only includes the shimmer file code for brevity, you can find the GitHub link to the full source code repository at the end of the article.

The implementation part is pretty easy, just wrap your parent view in the shimmer by using Shimmer.fromColors() as:

As you can see, it mainly takes two parameters and a child widget.

The baseColor is the main color of the view, and the highlightColor is the color that is used to highlight the view to show the moving effect.

You can choose any colors as per your choice here. The only thing remaining is to add the required placeholder widgets as per our Post which is pretty easy.

All you need to do is to swap in a container widget with required parameters instead of your original widgets (a Text widget in our case).

Here’s the complete post_widget.dart file:

And here’s the final output:

The final output

Conclusion

Shimmersare a great way of showing loading views. A lot of popular companies are already using it in their apps. This article showed a basic way of implementing a custom shimmer in Flutter.

You can extend this idea to use it for any views. If you want to know how to use it with FutureBuilder comment down and I’ll try to make an article for the same :)

The complete source code can be found on the link below:

harshshinde07/Shimmer-Flutter

Thanks for reading the article. If you enjoyed the article or learned something new, show your support by clapping as many times as possible. 👏

Let’s Connect:

• GitHub
• LinkedIn