What is vsync and TickerProvider in Flutter?
TL;DR: vsync is a TickerProvider that synchronizes animations to the display's refresh rate — preventing off-screen animations from consuming CPU/GPU. SingleTickerProviderStateMixin provides one Ticker; TickerProviderStateMixin provides multiple.
Full Answer
A Ticker calls a callback on every animation frame. vsync ensures the ticker only ticks when the widget is visible (the Flutter framework throttles tickers for hidden widgets). This prevents wasted CPU cycles for background animations.
When to use each mixin
- ▸SingleTickerProviderStateMixin: exactly ONE AnimationController
- ▸TickerProviderStateMixin: multiple AnimationControllers
- ▸If you use TickerProviderStateMixin with a single controller, you get a debug warning
Forgetting to pass vsync: this to AnimationController and forgetting to dispose() the controller are the two most common animation-related memory leaks.
Code Examples
Flutter logo fades in over 800ms. No CPU used when widget is off-screen.
Interview Tip
vsync throttles tickers when the app is in the background (paused lifecycle state). Without vsync, an animation would keep running in the background, wasting battery.