tezvyn:

AnimationController: The Conductor of Your Animation

AI-drafted, machine-checkedSource: api.flutter.devintermediate

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.

Read the original → api.flutter.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.