Explicit animations

When implicit is not enough

Implicit animations run when a value changes. Some effects need more control: a pulsing "live" dot that repeats forever, a loading animation that plays while data loads, an animation the user can pause or reverse, or several properties moving in a coordinated sequence. For these, you drive the animation yourself with an AnimationController.

The pieces

class PulsingDot extends StatefulWidget {
  const PulsingDot({super.key});
  @override
  State<PulsingDot> createState() => _PulsingDotState();
}

class _PulsingDotState extends State<PulsingDot> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _scale;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 800))
      ..repeat(reverse: true);                           // 0 -> 1 -> 0 forever
    _scale = Tween<double>(begin: 0.8, end: 1.2)
        .animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();                               // ALWAYS dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _scale,
      child: const CircleAvatar(radius: 8, backgroundColor: Colors.red),
    );
  }
}

SingleTickerProviderStateMixin is a mixin (module 2) that lets the State act as the vsync for one controller. Use TickerProviderStateMixin if the State has several controllers. The mixin pauses tickers when the widget is not visible, saving battery.

Flutter ships ready transition widgets that take an Animation directly: FadeTransition (opacity), ScaleTransition, SlideTransition (an Offset), RotationTransition and SizeTransition. They are efficient because they update only what changes each frame, without calling build on your widget.

AnimatedBuilder for custom effects

AnimatedBuilder(
  animation: _controller,
  child: const Icon(Icons.sync, size: 40),            // built once, reused every frame
  builder: (context, child) => Transform.rotate(
    angle: _controller.value * 2 * 3.14159,
    child: child,
  ),
)

Start with implicit animations; reach for a controller only when you need repeat, pause or reverse.

Controlling playback

• _controller.forward() plays from the current value to 1.
• _controller.reverse() plays back to 0.
• _controller.repeat(reverse: true) loops back and forth.
• _controller.stop() pauses; _controller.reset() jumps to 0.
• forward() returns a Future (TickerFuture) you can await to run something when it finishes.

Common mistakes

• Not disposing the controller: "AnimationController.dispose() called... was never disposed" warnings and leaked tickers.
• Creating the controller in build: a new controller on every rebuild. Create it in initState.
• Calling setState on every tick and rebuilding the whole screen. Use AnimatedBuilder or transition widgets.
• Forgetting the mixin: "The argument type ... can't be assigned to the parameter type TickerProvider".