Animation Deep Dive
Article Summary
Filip Hracek from Flutter reveals the surprising truth: animations aren't special magic—they're just really fast rebuilds calling setState() up to 120 times per second.
This deep dive from the Flutter team strips away the abstraction layers to show how animations actually work under the hood. Instead of practical tutorials, it deliberately takes the least pragmatic approach to reveal the fundamental mechanics that power every Flutter animation.
Key Takeaways
- Motion is an illusion: screens show 60-120 still frames per second
- AnimatedBuilder literally calls setState() on every single frame
- Ticker fires a function each frame; AnimationController tracks animation progress
- You can animate anything by manually listening to controllers and calling setState
- TweenAnimationBuilder achieves the same result in far fewer lines of code
Flutter animations are fast enough to rebuild widget trees up to 120 times per second, with no special rendering path required.
About This Article
Developers often think Flutter animations need special rendering paths. In reality, they're just widget rebuilds happening 60-120 times per second. This misunderstanding creates unnecessary complexity.
Filip Hracek shows how to use SingleTickerProviderStateMixin with AnimationController and manual setState() calls. This approach exposes how animations actually work without any framework magic.
Once you understand that AnimatedBuilder calls setState() on every frame, you can write cleaner animation code. Higher-level widgets like TweenAnimationBuilder let you do this with much less boilerplate.