Stagger animation
- Flutter course
- Advanced
- Lesson 59/69
- 4 min
Sequence multiple animations as stagger.
What is stagger?
stagger is a technique for starting multiple animations sequentially. Each animation is placed in a different Interval of the controller's 0.0-1.0 progress. So as the first animation ends the next begins; all run under the same AnimationController.
final a1 = Tween(begin: 0.0, end: 100.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);Multiple animations sequentially
To run two animations sequentially, give the first Interval(0.0, 0.5) and the second Interval(0.5, 1.0). The first then runs while the controller is between 0.0 and 0.5, and the second between 0.5 and 1.0; all scheduled under the same AnimationController.
Practice Sequential animation with Interval
Define the _EmptyVsync class. In main, create ctrl (vsync: _EmptyVsync(), duration 1 second). Animate Tween(begin: 0.0, end: 50.0) with animate; use CurvedAnimation(parent: ctrl, curve: const Interval(0.0, 0.5, curve: Curves.easeIn)) as the curve. Print the animation's value.
Starter code
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl oluştur, Tween ile animate içinde CurvedAnimation ve Interval kullan,
// animasyonun value değerini yazdır
}Sample solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final anim = Tween(begin: 0.0, end: 50.0).animate(
CurvedAnimation(
parent: ctrl,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
print(anim.value);
ctrl.dispose();
}Expected output
0.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Interval do in stagger animation?
- Cleans memory
- Starts the animation
- Sets an animation's time range within the controller Correct answer
- Gives widget size
Explanation: Interval(begin, end) determines within which sub-range of the controller's 0.0-1.0 progress an animation runs.
2 Use Interval
curve: const ____(0.0, 0.5, curve: Curves.easeIn),curve: const Interval(0.0, 0.5, curve: Curves.easeIn),Explanation: Interval sets the sub-range of the controller progress for an animation; Tween is used for the value range.
3 Stagger matches
| Term | Meaning |
|---|---|
stagger |
Sequential animation technique |
Interval |
Time range |
Tween |
Value range |
AnimationController |
Single time source |