What is RepaintBoundary and how does it help performance?
TL;DR: RepaintBoundary creates an isolated layer in the render tree. When content inside it changes, only that layer is repainted rather than the entire screen — ideal for frequently-animating subtrees.
Full Answer
Flutter's painting system walks the render tree and repaints dirty regions. RepaintBoundary inserts a new compositing layer, isolating a subtree so its repaints don't affect the rest of the tree.
Use it for widgets that repaint frequently (animations, videos, real-time charts) while the surrounding UI is static.
Don't overuse RepaintBoundary. Each boundary uses memory for an offscreen layer. The Flutter DevTools 'Highlight Repaints' mode shows you which widgets are repainting — use that to identify hotspots before wrapping them.
Code Examples
BackgroundWidget repaints only when changed; AnimatedSpinner repaints each frame without triggering background repaint
Common Mistakes
- ✗Wrapping every widget in RepaintBoundary 'just in case' — increases memory usage
- ✗Not using DevTools to verify the boundary is actually reducing repaints
Interview Tip
Pair this answer with mentioning DevTools' 'Highlight Repaints' toggle — shows you're comfortable profiling, not just theorizing.