Notes

UI Updates at 60fps

Flutter uses a scheduler that renders the screen at 60 frames per second.

Whenever the state of our application changes (via setState() or other means) and Flutter determines that it needs to update the UI, it will do so next scheduled frame.

Tickers

You can think of Ticker as a special periodic timer that we can use to be notified when the Flutter engine is about to draw a new frame.

To create a ticker, we need to add a SingleTickerProviderStateMixin to our State subclass.

Then, we can create and start it in initState():

Duration _elapsed = Duration.zero;
late final Ticker _ticker;
@override
void initState() {
  super.initState();
  _ticker = this.createTicker((elapsed) {
    setState(() {
      _elapsed = elapsed;
    });
  });
  _ticker.start();
}

@override
void dispose() {
  // don't forget to dispose it
  _ticker.dispose();
  super.dispose();
}

Advantages of Ticker over Timer

• Ticker uses the refresh rate of the screen so that we can update the UI every time Flutter renders a new frame.
• a Ticker callback is only called when the widget is currently visible

Takeaway: Flutter animations use tickers because they provide a reliable way of updating the UI at 60 frames per second.

This is true for implicit animations and explicit animations. As we will see, we need a TickerProvider in order to create an AnimationController.