What is a vsync in flutter?

In Flutter, vsync (vertical synchronization) is a mechanism that helps to synchronize the frame rate of the app with the refresh rate of the device’s display. This can help to reduce frame drops and improve the smoothness and responsiveness of the app.

vsync works by preventing the app from rendering new frames more frequently than the display’s refresh rate. When the app attempts to render a new frame, it checks the current vsync state to see if it is allowed to do so. If the vsync state indicates that the display is currently busy rendering a previous frame, the app will skip the current frame and try again on the next refresh. This can help to avoid frame drops and improve the overall performance of the app.

vsync is typically implemented using a Ticker in Flutter. A Ticker is a stateful object that generates a stream of tick events at a regular interval. The vsync state can be managed using a TickerProvider, which is responsible for creating and disposing of Tickers as needed.

Here is an example of how you might use a Ticker to implement vsync in a Flutter app:

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  void initState() {
    _animationController = AnimationController(
      vsync: this, // Set the vsync state to this (the current state object)
      duration: Duration(seconds: 1),

  void dispose() {

  Widget build(BuildContext context) {
    return Container();


In this example, we have created a stateful widget called MyApp with a state class called _MyAppState. The state class mixes in SingleTickerProviderStateMixin, which provides a vsync state for a single Ticker.

We then create an AnimationController in the initState function and set the vsync state to this (the current state object).

Leave a Comment