What is RepaintBoundary and when should you use it?
TL;DR: RepaintBoundary creates a new compositor layer, isolating its subtree from parent repaints. Use it around complex custom painting or frequently-animating widgets to prevent the rest of the tree from repainting when they change.
Full Answer
When any widget repaints, Flutter repaints the entire layer it belongs to. RepaintBoundary puts a widget in its own layer, so its repaints are isolated.
When to use
- ▸Animated widgets that update frequently (charts, progress bars)
- ▸Complex CustomPainter that changes while the rest of the page is static
- ▸List items that have independent animation states
When NOT to use
Every RepaintBoundary adds memory and compositing overhead. Adding it everywhere is counterproductive — profile first.
Use Flutter DevTools > Highlight Repaints to visualize which areas are repainting before adding RepaintBoundary everywhere.
Code Examples
// Without RepaintBoundary: Text widgets repaint at 60fps needlessly // With RepaintBoundary: only AnimatedChart's layer is repainted
Common Mistakes
- ✗Adding RepaintBoundary to every widget — increases texture memory and compositor work
- ✗Not checking DevTools Highlight Repaints before adding boundaries — premature optimization
Interview Tip
Explain the trade-off: RepaintBoundary saves CPU (fewer pixels re-rasterized) but costs GPU memory (another texture layer). Profile first, optimize second.