What is AnimationController and how does it work?
TL;DR: AnimationController is the driver of explicit animations. It generates values from 0.0 to 1.0 over a given duration and requires a TickerProvider (vsync) to synchronize with the device's refresh rate.
Full Answer
AnimationController is the heart of Flutter's explicit animation system. It drives a value from a lower bound to an upper bound over a specified duration.
Key Properties
- ▸duration: How long the animation takes
- ▸vsync: TickerProvider to sync with screen refresh rate
- ▸value: Current animation value (0.0–1.0 by default)
- ▸status: AnimationStatus (dismissed, forward, reverse, completed)
Why vsync?
Without vsync, the Ticker would fire even when the widget is off-screen, wasting CPU/battery. SingleTickerProviderStateMixin or TickerProviderStateMixin are the standard mixins to provide this.
Always call controller.dispose() in the State's dispose() method. Leaking controllers causes memory leaks and 'ticker still active' errors.
Code Examples
// Widget fades in from 0 opacity to 1 over 600ms
Common Mistakes
- ✗Forgetting to dispose the controller
- ✗Using TickerProviderStateMixin when you only have one controller (use SingleTickerProviderStateMixin)
- ✗Not calling forward() or repeat() — controller does nothing until driven
Interview Tip
Explain that vsync is about efficiency: it ties the animation to the display's frame budget. Mention that AnimationController itself is just a number producer — Tween and CurvedAnimation add meaning to that number.