ShimmerScope class final

Puts every Shimmer below it on one clock and one band.

A bare Shimmer owns its own AnimationController and sweeps the gradient across its own box. Put three of them on a screen and you get three clocks, each started when its widget mounted, each running a full highlight across a box the size of an avatar or a line of text. Wrapping them changes both halves of that: the scope holds the only controller, and each Shimmer resolves its own position inside the scope's box and paints the slice of the sweep that lands on it. One band crosses the screen.

ShimmerScope(
  child: Column(
    children: [
      for (final row in rows)
        Shimmer.fromColors(
          baseColor: Colors.grey.shade300,
          highlightColor: Colors.grey.shade100,
          child: row,
        ),
    ],
  ),
)

The scope owns period and loop, because those describe the clock. Everything else stays on the individual Shimmer: its colors, its Shimmer.direction, its Shimmer.enabled flag, its Shimmer.semanticsLabel. A widget with enabled: false holds still on whatever part of the band it was showing while its neighbours carry on.

The sweep is anchored to the scope's box rather than to the widgets inside it. A Shimmer scrolling through a list therefore moves through the band instead of carrying its own copy along, except while the band is held still by enabled: false or by reduced motion, when nothing repaints it. Reduced motion otherwise works as it does without a scope: MediaQuery.disableAnimationsOf freezes the clock.

Adding a scope is the only thing that changes any of this. A Shimmer with no scope above it runs exactly as it did before scopes existed.