How do you create staggered animations in Flutter?
TL;DR: Staggered animations use a single AnimationController with multiple Animations, each defined using Interval(begin, end) as the curve. Intervals divide the controller's 0.0-1.0 range into time slots. Use TweenSequence for complex multi-step value animations.
Full Answer
A staggered animation makes multiple elements animate one after another (or with overlapping timing), creating a cascading visual effect. All driven by a single AnimationController.
Interval curve
Interval(0.0, 0.5) makes an animation run only during the first half of the controller's duration. Interval(0.3, 0.8) starts at 30% and ends at 80%. Each child widget gets its own Interval.
TweenSequence chains multiple Tween values end-to-end. It's perfect for: slide in → pause → slide out, or color: red → yellow → green in sequence.
Code Examples
// Item 1: slides in 0-400ms // Item 2: slides in 150-550ms // Item 3: slides in 300-700ms // Creates cascading waterfall effect // One AnimationController drives everything
Common Mistakes
- ✗Using separate AnimationControllers for each staggered item — wastes resources; one controller with Intervals is more efficient
- ✗Setting Interval end > 1.0 — clamp values to [0.0, 1.0] range
Interview Tip
Staggered animations are common in onboarding flows and list reveals. Show the Interval technique — one controller, multiple windows. Ask the interviewer if they want to see TweenSequence for sequential value changes too.