Flutter AnimationController and Tween Explained

A visual walkthrough exposes the exact moment forward, reverse, and status callbacks fire.

Subscribe on YouTube@codingliquids

Assemble controller tween curve and builder

AnimationController supplies normalised time, Tween maps time to a value range, CurvedAnimation eases progress, and a builder renders values. Keeping these four roles separate makes it clear whether a change affects timing, range, feel, or painting.

Putting all arithmetic inside setState obscures the animation model and rebuilds too much.

Give AnimationController a vsync

Mix SingleTickerProviderStateMixin into State and construct AnimationController with vsync this and a duration. Vsync pauses ticks when the route is not visible, saving CPU and battery.

Use TickerProviderStateMixin rather than the single variant when one State owns multiple simultaneous controllers.

class _PulseState extends State<Pulse> with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  late final Animation<double> scale;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 600));
    scale = Tween(begin: 0.9, end: 1.1).animate(
      CurvedAnimation(parent: controller, curve: Curves.easeInOut),
    );
    controller.repeat(reverse: true);
  }
  @override
  void dispose() { controller.dispose(); super.dispose(); }
  @override
  Widget build(BuildContext context) =>
      ScaleTransition(scale: scale, child: const FlutterLogo(size: 96));
}

The controller timeline on Instagram visualises tweens, curves, intervals, status, and cancellation together.

Follow me on Instagram@sagnikteaches

Map zero-to-one time through Tween.animate

Tween(begin, end).animate(parent) produces an Animation whose value follows the parent. Use ColorTween, SizeTween, RectTween, or TweenSequence when the output is not a simple scalar.

A Tween does not advance on its own; reading it without a ticking parent always returns the current parent position.

Shape motion with CurvedAnimation

CurvedAnimation wraps the controller and applies separate forward and reverse curves if required. Choose easing for the physical story: decelerate arrivals, ease-in departures, and avoid bounce for destructive confirmations.

Applying a curve twice can exaggerate easing and produce long periods with barely visible movement.

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: controller,
    child: const Icon(Icons.favorite, color: Colors.red, size: 72),
    builder: (context, child) => Transform.scale(
      scale: scale.value,
      child: Opacity(opacity: opacity.value, child: child),
    ),
  );
}

void toggle() => controller.status == AnimationStatus.completed
    ? controller.reverse()
    : controller.forward();

Limit rebuilds with AnimatedBuilder

AnimatedBuilder listens to an Animation and rebuilds only its builder subtree on every tick. Pass static content through child and transform it inside the builder.

Calling setState from a controller listener rebuilds the entire State even when only one icon moves.

My LinkedIn animation article connects ticker ownership to testability, interruption, and frame cost.

Connect on LinkedInSagnik Bhattacharya

Drive direction repeat and completion

forward, reverse, repeat, stop, and animateTo control playback, while addStatusListener reacts to completed and dismissed states. Use reverseDuration when return motion should be faster and remove listeners that capture external owners.

Calling repeat after every completed callback can accidentally register an endless loop of status work.

controller.addStatusListener((status) {
  if (status == AnimationStatus.completed) controller.reverse();
  if (status == AnimationStatus.dismissed) controller.forward();
});

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

Dispose every controller you create

Call controller.dispose before super.dispose so its Ticker is released when the State leaves the tree. A disposed controller must not receive callbacks from delayed work or retained objects.

The active Ticker warning is evidence of a real lifecycle leak, not harmless debug noise.

Own the controller as a finite resource

An AnimationController needs a ticker provider tied to the widget’s lifecycle. Create it in initState, update duration or dependent tweens when relevant widget inputs change, and dispose it exactly once. Starting a new controller from build creates work on every rebuild and can leak tickers. TickerMode can silence frames in an inactive subtree, but it does not remove the obligation to dispose the controller.

Tweens translate the controller’s normalised progress into domain values. Apply curves through a curved animation or a chained curve tween, and use intervals when one timeline coordinates several phases. Readability improves when the named animation expresses intent—opacity, scale, turn, or offset—rather than when listeners repeatedly call setState and calculate every value manually. An AnimatedBuilder can keep an expensive static child outside the rebuilding portion.

Controller methods return a TickerFuture, which matters when later work should wait for completion or cancellation. If the route disappears, an awaited animation may be cancelled; handle that lifecycle rather than continuing to touch disposed state. Status listeners are suitable for repeat, reverse, or phase changes, but remove any separately registered listener you no longer own. Reversing from the current value produces a different experience from resetting to an endpoint first, so choose that behaviour deliberately.

Deterministic tests should pump a known fraction of the duration, inspect the animated values, and then settle only when the animation is expected to terminate. A repeating controller makes an unconditional pumpAndSettle time out. Cover interruption, reverse, changed duration, route disposal, and the reduced-motion path. On real hardware, watch the performance overlay for layout or paint work caused by the animated property; transforms and opacity have different costs from continuously changing constraints, and the right choice depends on the surrounding tree.

Several controllers can often become one controller with multiple derived animations, but independent interactions should not be forced onto a shared timeline. A menu that can open while a loading spinner continues needs separate ownership. When duration changes at runtime, decide whether current progress should keep its fraction or preserve remaining wall-clock time. Clamp externally supplied controller values before assigning them, and use bounded or unbounded controllers only for the range their physics requires. Debug labels make ticker warnings easier to trace in a large tree, especially when a test reports that an active ticker survived widget disposal.

Physics simulations can drive a controller beyond ordinary duration-based motion, but their bounds and completion criteria still need definition. Feed gesture velocity in the controller’s coordinate system, clamp impossible values, and test an interrupted fling followed immediately by a new drag. The visual position and the semantic state must agree when the simulation stops, including when accessibility settings bypass the motion.

Common mistakes

• Assemble controller tween curve and builder: In explicit Flutter animation, putting all arithmetic inside setState obscures the animation model and rebuilds too much; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.
• Give AnimationController a vsync: In explicit Flutter animation, use TickerProviderStateMixin rather than the single variant when one State owns multiple simultaneous controllers; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.
• Map zero-to-one time through Tween.animate: In explicit Flutter animation, a Tween does not advance on its own; reading it without a ticking parent always returns the current parent position; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.
• Shape motion with CurvedAnimation: In explicit Flutter animation, applying a curve twice can exaggerate easing and produce long periods with barely visible movement; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.
• Limit rebuilds with AnimatedBuilder: In explicit Flutter animation, calling setState from a controller listener rebuilds the entire State even when only one icon moves; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.
• Drive direction repeat and completion: In explicit Flutter animation, calling repeat after every completed callback can accidentally register an endless loop of status work; inspect this explicit Flutter animation cause before changing another explicit Flutter animation widget.

Frequently asked questions

How does assemble controller tween curve and builder work in explicit Flutter animation?

For explicit Flutter animation, the starting rule is that animationController supplies normalised time, Tween maps time to a value range, CurvedAnimation eases progress, and a builder renders values. Apply this explicit Flutter animation rule first because assemble controller tween curve and builder determines whether the explicit Flutter animation pattern fits.

Why does map zero-to-one time through Tween.animate matter for explicit Flutter animation?

In explicit Flutter animation, use ColorTween, SizeTween, RectTween, or TweenSequence when the output is not a simple scalar. Keeping map zero-to-one time through Tween.animate at the explicit Flutter animation call site exposes the explicit Flutter animation return value directly.

What failure should I test first in explicit Flutter animation?

First reproduce the explicit Flutter animation case where calling setState from a controller listener rebuilds the entire State even when only one icon moves. The optimised version confines ticks to an AnimatedBuilder subtree and leaves the surrounding state untouched.

How can I verify explicit Flutter animation before release?

Exercise dispose every controller you create with real explicit Flutter animation inputs on every shipped platform. Inspect the final explicit Flutter animation callback or output; a successful explicit Flutter animation button tap alone is not proof.

Further reads

Connect explicit Flutter animation to the surrounding Flutter stack through these published tutorials:

• Flutter Development Guide 2026
• Flutter AnimatedContainer: Animate Without Controllers
• Flutter Staggered Animations Step by Step
• Flutter CustomPaint and Canvas: Draw Custom Graphics
• Flutter Animations: The Complete Guide With Code Examples

Sources: Flutter framework and Dart API documentation; explicit Flutter animation examples verified against current stable Flutter.