AnimationsMedium30 XP3 min read
What are the key tips for performant animations in Flutter?
TL;DR: Use RepaintBoundary to isolate animated subtrees, avoid animating properties that trigger layout (width/height prefer Transform), use const for static children in AnimatedBuilder, and profile with the Flutter DevTools Timeline.
Full Answer
Key Rules
- ▸Transform and Opacity: animated on the compositor thread (no layout/paint), super cheap
- ▸Width/Height changes: trigger full layout — use ScaleTransition instead of animating size
- ▸RepaintBoundary: wrap animated widgets so only they repaint, not ancestors
- ▸const child in AnimatedBuilder: prevents subtree rebuild every frame
- ▸Avoid opacity on large widget trees: use FadeTransition or direct opacity animation with a RepaintBoundary
🎯
Enable 'Show performance overlay' in DevTools. The GPU thread bar spiking means paint work; the UI thread bar spiking means Dart/layout work.
Code Examples
dartCheap vs expensive animation patterns
Output
// Scale is 10x cheaper than animating width/height
Common Mistakes
- ✗Animating width/height when Transform.scale achieves the visual same effect with far less cost
- ✗Using Opacity widget on large trees — it causes an offscreen layer compositing pass
Interview Tip
💡
The insight that Transform and Opacity run on the raster thread (not the UI thread) is a senior-level answer. It shows you understand Flutter's rendering pipeline.
#performance#repaint-boundary#const#opacity-layer