Make Loading Great — Shimmer Loading Effect on Flutter
When fetching data on our app, we use CircularProgressIndicator, which is okay, but you can enhance the user experience by using the shimmer effect. In today’s post, I’ll show you how you can do it easily with Flutter.
Project setup
If you want to follow along with me, download the starting project from GitHub.
We have NewsPage, which shows all the news. On initState, we assume it takes 2 seconds to get the data from the backend. That’s why after 2 seconds, we set _isLoading to false. If you run the app, it shows the CircularProgressIndicator for 2 seconds.
Create Skelton widget
The shimmer effect is nothing, just a Container with a light gray color. The color of our Container is back with 4% opacity. Also, we are going to round the corner by applying a borderRadius. In the end, I’m going to add padding so that our Container has a mini height, which is 16 right now because we apply 8 paddings all other the Container.
Now it’s time to give a name to this container, and I’m going to call it Skelton. Sometimes we may need to define the height & width. That’s why I will add the height & width parameter to the Skelton widget
Shimmer Effect
Let’s create a shimmer effect for this news card. NewsCard has an image on the right, a few lines for category, title & time.
It’s time to replace CircularProgressIndicator with NewsCardSkelton.
Right now, it shows one, but we need a few more. For that, we are using ListView.separated.
Source code 🔥
I hope you like it. Let me know if you have any suggestions or if I made any mistakes.
