AnimationController: The Conductor of Your Animation
An AnimationController is the conductor for your animation's timing. It produces values from 0.0 to 1.0 over a duration, letting you play, reverse, or stop animations. Use it to drive widgets like SlideTransition.
Why it exists
Animations need a source of truth for their state: Are we playing, stopped, or reversed? How far along are we? Flutter separates the "what" of an animation (the visual change) from the "how" (the timing and control). AnimationController solves the "how" by providing a standard API to manage animation lifecycles.
The mental model
An AnimationController is like a stopwatch with a playback head. It knows the total duration (the stopwatch's limit) and the current progress (the playback head's position) as a value from 0.0 to 1.0. It doesn't know what is being animated; it just broadcasts its current value each time the screen is ready for a new frame. Other widgets, like FadeTransition, listen to this value and translate it into a visual property like opacity.
How it works
You create an AnimationController in a StatefulWidget's initState, providing a duration and a vsync argument. The vsync argument takes a TickerProvider, which links the animation's timing to the screen's refresh rate for smooth playback. You typically get this by adding the SingleTickerProviderStateMixin to your State class. You start the process by calling methods like .forward() or .repeat(). The controller's value is then consumed by an animation widget (like SlideTransition) or used directly in an AnimatedBuilder.
When to use it
Use it for any explicit animation where you need fine-grained control over playback, such as starting, stopping, or reversing. It's essential when you need to coordinate multiple animations, using async/await on the Future returned by .forward(). It's also the right tool for driving an animation from user input, like a drag gesture.
When not to use it
For simple, one-shot "fire and forget" animations, use implicit animation widgets like AnimatedContainer. They are much simpler and manage their own animation controllers internally. If you just need to animate between two states without manual control, implicit animations are the better choice. AnimationController is for when you need to be the conductor.
One canonical example
A custom loading spinner. First, create an AnimationController with a one-second duration. Second, in initState, call .repeat() on it. Third, wrap your spinner icon in a RotationTransition, passing the controller to its turns property. The RotationTransition listens to the controller's 0.0-1.0 value and translates it into a full rotation. Finally, and most critically, you must call .dispose() on the controller in your State's dispose method to stop the animation and prevent memory leaks.
Interview question
Which scenario best demonstrates the appropriate use of an AnimationController?
- a.Applying a simple, one-shot fade effect to a widget when it becomes visible.
- b.Automatically managing an animation's duration without explicit configuration.
- c.Building an animation that can be paused, reversed, or driven by a user's drag gesture.Correct
- d.Smoothly transitioning a widget's background color based on a state change.
Why? this is the answer
The card emphasizes using AnimationController for explicit animations requiring fine-grained control over playback, including pausing, reversing, and driving animations from user input. Option C directly aligns with these capabilities, whereas options A, C, and D describe scenarios better suited for implicit animation widgets which handle simpler transitions automatically.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles