Flutter — Shimmer Effect

How to implement a fantastic shimmer effect like Facebook?

Evan Fang
The Startup

--

When launching apps, we usually see a loading view while the app is fetching the data from the local database or the server. It is quite easy to implement a loading indicator with Flutter, just use ProgressIndicator.

Or maybe you can customize your loading view.

From https://dribbble.com/shots/6542025-Check-Loading-Animation

And here comes another way to present this kind of loading concepts to users — Shimmer. Shimmer is a little harder to achieve than other approaches because it requires all the widgets to animate simultaneously and also keep their shapes to let users know what will the final view look like. It is much different from the single loading widget. But it is definitely worth doing this since it lets users easier to understand what is going to happen after the loading animation by keeping all the widgets in the same positions with the same sizes and shapes, that enhance the user experience.

--

--

Evan Fang
The Startup

An Android/Flutter engineer at LINE Corporation.