Gestaffelte und choreografierte AnimationControllers

A staggered animation is a sequence where several visual changes happen at different times within a single timeline, instead of all at once.

Think of a card that first fades in, then slides up, then its icon rotates. Each step starts and ends at a different point along one shared clock.

• One AnimationController drives the master clock (0.0 to 1.0).
• Each property gets its own slice of that clock via an Interval.
• This keeps everything perfectly in sync because they share the same time source.

This lesson focuses on orchestrating multiple animations with intervals and curves to build choreographed sequences.

The core pattern: a single AnimationController defines the total duration, and you derive multiple Animation objects from it.

The controller value moves linearly from 0.0 to 1.0. Each animation reads that value but maps it to its own range and timing window.

• controller.value is the shared progress.
• Tween maps 0..1 to your target values (offsets, opacity, scale).
• CurvedAnimation applies easing and timing windows.

Why one controller instead of many? Because synchronizing several independent controllers is error-prone. A single timeline guarantees the steps never drift apart.

An Interval is a curve that stays at 0.0 until its begin point, animates between begin and end, then stays at 1.0.

This is the key tool for staggering. By giving each animation a different interval, you decide when in the master timeline it plays.

• Interval(0.0, 0.5) — plays in the first half.
• Interval(0.5, 1.0) — plays in the second half.
• Interval(0.2, 0.8) — starts a bit late, ends a bit early.

You can also nest a curve inside an interval to ease the motion within that slice.

Here is the idiomatic Flutter setup. Inside a State with SingleTickerProviderStateMixin, create one controller and several animations, each using a CurvedAnimation with an Interval.

• vsync: this ties the controller to the screen's frame ticker.
• Each CurvedAnimation combines an interval (timing) with a curve (easing).
• Tween.animate(...) maps the curved progress to real values.

This is framework code, so it is not standalone-runnable, but it is the canonical structure you will reuse constantly.

The magic of choreography is in how intervals overlap. You rarely want hard cuts where one step fully finishes before the next begins.

• Sequential: Interval(0.0, 0.3) then Interval(0.3, 0.6) — clean, distinct steps.
• Overlapping: Interval(0.0, 0.5) and Interval(0.3, 0.8) — the second starts while the first is still finishing. This feels organic and fluid.

Overlap creates the sense that motion flows from one element into the next, which is the hallmark of polished, choreographed UI.

An interval controls when; a curve controls how the motion feels inside that window.

• Curves.easeOut — fast start, gentle stop. Great for entrances.
• Curves.easeIn — slow start, fast end. Great for exits.
• Curves.elasticOut — overshoots and settles. Adds playfulness.
• Curves.fastOutSlowIn — Material's standard motion curve.

You can pass the curve directly to Interval(begin, end, curve: ...), so each slice carries both its timing and its easing.

A common pattern: animate a list so each item appears slightly after the previous one. You compute each item's interval from its index.

Divide the timeline into staggered windows. Item i might start at i * step and run for a fixed duration, clamped to stay inside [0, 1].

• Keep the per-item duration longer than the step so windows overlap.
• Clamp end to 1.0 so late items still complete.

This produces the familiar 'cascading' reveal seen in well-designed mobile apps.

To render the choreography, wrap your widget tree in an AnimatedBuilder (or use FadeTransition / SlideTransition for individual animations).

• AnimatedBuilder rebuilds only its builder when the controller ticks — efficient.
• Read each derived animation's .value inside the builder.
• The child parameter caches subtrees that do not depend on the animation.

Because every animation shares the one controller, a single forward() plays the entire choreographed sequence.

Once your timeline is built, the controller gives you full transport control over the whole choreography at once.

• forward() — play 0 to 1.
• reverse() — play 1 to 0 (the choreography runs backwards).
• repeat(reverse: true) — loop back and forth, ideal for ambient effects.
• reset() then forward() — replay from scratch.

Tip: If you want exits to feel different from entrances, build separate intervals/curves and switch which animations you read based on direction, rather than just reversing.

Sometimes one timeline is not enough — for example a looping background pulse plus a one-shot entrance. Then you do use multiple controllers, but coordinate them deliberately.

• Use a status listener to start controller B when controller A completes.
• Or use TickerFuture: await _a.forward(); then _b.forward();
• Always dispose every controller to avoid ticker leaks.

Prefer a single controller for tightly-synced choreography; reach for multiple only when the animations are genuinely independent in lifecycle or looping behavior.

Staggered animations are easy to get subtly wrong. Watch for these:

• Forgetting to dispose the controller — leaks the ticker and prints debug warnings.
• Interval end past 1.0 — Interval asserts 0.0 ≤ begin ≤ end ≤ 1.0; clamp your computed windows.
• Too many controllers — harder to sync; prefer one with intervals.
• Curves on the wrong layer — nest the curve inside the Interval, not as a separate CurvedAnimation stacked on top, or easing compounds unexpectedly.
• No overlap — purely sequential slices can feel robotic; add slight overlap.

You want three list items to fade and slide in one after another, fully synchronized, with a smooth cascading overlap. Which approach best fits Flutter's idiomatic choreography model?

You learned how to build staggered, choreographed sequences in Flutter:

• One AnimationController is the shared master clock (0.0 to 1.0) that keeps everything in sync.
• Interval(begin, end, curve: ...) slices the timeline so each animation plays in its own window with its own easing.
• Overlapping intervals create organic, flowing motion; purely sequential ones feel mechanical.
• Derive each property with Tween.animate(CurvedAnimation(...)) and render via AnimatedBuilder or transition widgets.
• Compute per-item windows from the index for cascading lists, and always clamp to [0, 1] and dispose controllers.
• Use multiple controllers only when lifecycles are genuinely independent (e.g., a one-shot entrance plus an ambient loop).

Master one timeline, slice it with intervals and curves, and you can choreograph almost any mobile motion.