Synchronize multiple Shimmers automatically

[JonasWanke]

Currently, to synchronize multiple widgets showing shimmers, you have to create a Shimmer wrapping all those widgets. This also doesn't allow us to add any non-shimmering widget inside.

Maybe, instead of calculating the progress locally for each Shimmer, you could globally synchronize them by transforming local to global offsets (RenderBox.localToGlobal) and using a global time (DateTime.now()). The Shimmer's position would then be, e.g. for ShimmerDirection.ltr:

final progress = (DateTime.now().millisecondsSinceEpoch / period.inMilliseconds) % 1;
final position = width * progress - localToGlobal(offset).dx;

Pros

• It's a common use case to display multiple Shimmer's on one page and you can't always wrap a single Shimmer around all required children. And even if you could do so, this approach gives you more flexibility.

Cons

• Having only a small Shimmer on a large display, it can take some time until the highlight actually is in range of the child widget.
• Due to the above argument, this would be a breaking change.

[Hannnes1]

Another solution would be to use the same approach that is described in the cookbook. It uses a single, top level widget to synchronize all the descendants.