How do you create staggered animations in Flutter?
TL;DR: Use a single AnimationController with Interval curves to time different animations within its 0.0–1.0 range. Each sub-animation has a begin/end interval that maps to a portion of the controller's timeline.
Full Answer
Staggered animations let multiple properties animate at different times, creating a choreographed sequence from a single controller.
The Interval Curve
Interval(0.2, 0.8, curve: Curves.easeIn) tells an animation to be idle from 0.0–0.2, animate from 0.2–0.8, then stay at its final value from 0.8–1.0.
One controller drives everything. The Interval tells each tween which slice of the controller's progress to use.
Code Examples
// Item fades in first (0-600ms), then slides up (360-1200ms), overlapping
Common Mistakes
- ✗Using separate controllers for each animation — hard to coordinate and dispose
- ✗Interval begin >= end which throws an assertion error
Interview Tip
Show you can drive complex multi-property choreography from a single controller. Mention staggered_animations package as a community solution for list-level staggering.