How To Add Shimmer Effect to Your App (And Why You Should)

In this tutorial, we'll show you how to add a shimmer effect when data is loading in your app.
We'll also talk about the 2 reasons why this is good UX.
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflow.com
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.

[@flutterflowexpert]

Great shimmer. This is very important when loading data and it is super easy to do with FF! Great video :D

[@depalmadotco]

Love it, have been doing this without the shimmer using a copy of blank list items. So much nicer with the shimmer.

[@ClaudioEden]

Amazing. Awesome effect and so easy to apply. Tks!

[@KevinFremon]

Awesome tutorial for loading states!

[@airtondtv]

Perfect...

[@TechwithLaughter]

Good implementation huh.

[@pauloalves2840]

Great tutorial, its just that the transform component does not seem to have an add component button on my end of flutterflow

[@pauloalves2840]

But I was able to add an image to the column and then drag it (in the preview screen) into the transform component

[@Xzxzkanal]

How do I add this to a button so that it always shimmers, not while loading?

[@gymcluster3038]

any video on how to obtain parameters of a redirect url, I am using the OAuth of (mercado pago) and I need to extract the token from the url..

[@9wrongnumber]

bro i also have same requirement really frustrating only way i found is through setting up webhook which will push the data to firebase and monitoring firebase for data change

[@linustan1871]

how does this work for dynamic children? if lets say u list has 200 items, does that mean u have to offset the shimmer 200 times??

[@pathaksandeep]

You do not need shimmer on 200 items. Shimmer is representative UI so you only shimmer the visible part of your listview which won't be more than 10 items. If you apply animations for 200 items, you don't like your and your users' phone batteries ;)

[@estefanocampoverde3660]

using a container is better that use a image

[@pathaksandeep]

I am getting a drag effect using container. Somehow second run and following seems to leave lines on my thumbnails.

[@Bot-111]

Carousel slider image..

[@zarotech5365]

Bro Please can you make a school app 🙏🙏🙏 like 1,book collection 2,registration form 3,messaging and news 🙏🙏

[@dataslid]

wouldn't help to be able to reuse this