Adding shimmer effect (not in a listview)

Widgets & Design

I have the following component.

During OnInitialization event, I am calling a backend API on my server and when I get a response I am able to change the value of those fields (circled in red)

However, while it is working, it is very poor from an UX point of view as the user first sees 0,00 and then the real value.

I would like to use a shimmer effect on these fields. Any suggestion on how to achieve this result?

What have you tried so far?

Did not yet tried however I was thinking of implementing like this:

  1. Create a component (rectangular container) with the shimmer animation

  2. Wrap target fields into a stack and put the shimmer component on top of everything

  3. Set the conditional visibility of the component to a state variable I already use to trigger the rebuild of the component (e.g. isDataLoaded)

Not tried yet however from a pure logical point of view it could work. However it has the drawback that it must be set manually for every field. I am asking to understand if there is a better option in terms of reusability.

Did you check FlutterFlow's Documentation for this topic?
Yes
1
2 replies