What is the use of Ticker in Flutter?

Overview

A Ticker in Flutter is an object that fires a callback once per frame (typically 60 times per second). It is the foundation of Flutter's animation system — every animation uses a Ticker under the hood.

How Ticker Works

textCopy
Frame 1 (0ms)   → Ticker fires → AnimationController updates → Widget rebuilds
Frame 2 (16ms)  → Ticker fires → AnimationController updates → Widget rebuilds
Frame 3 (32ms)  → Ticker fires → AnimationController updates → Widget rebuilds
...

A Ticker sends the elapsed time since it started to its callback on every frame.

SingleTickerProviderStateMixin

The most common way to use a Ticker in Flutter — automatically provides a

vsync

AnimationController

dartCopy
class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, // ← 'this' is the Ticker provider
      duration: Duration(seconds: 2),
    )..repeat();   // Loop forever
  }

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

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: Icon(Icons.refresh, size: 48),
    );
  }
}

TickerProviderStateMixin (Multiple Animations)

When you need more than one AnimationController:

dartCopy
class _MyState extends State<MyWidget>
    with TickerProviderStateMixin { // ← Note: no "Single"
  late AnimationController _controller1;
  late AnimationController _controller2;

  @override
  void initState() {
    super.initState();
    _controller1 = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _controller2 = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }
}

Ticker vs AnimationController

Why vsync Matters

vsync

dartCopy
// ✅ With vsync — animation pauses when off-screen
AnimationController(vsync: this, duration: Duration(seconds: 1))

// ❌ Without vsync — animation keeps running even when not visible (bad!)

Summary: A

textCopy

Ticker

fires a callback every frame. Use

textCopy

SingleTickerProviderStateMixin

for single animations and

textCopy

TickerProviderStateMixin

for multiple animations. Always

textCopy

dispose()

your controllers.