RepaintBoundary
- Flutter course
- Expert
- Lesson 8/39
- 4 min
Limit repaint area with RepaintBoundary.
RepaintBoundary
RepaintBoundary moves the painting of child widgets to a separate layer; even if the parent tree changes, widgets inside this boundary are not repainted. Instead of redoing all paint work every frame, only the changed isolated area is drawn.
RepaintBoundary(
child: MyExpensiveWidget(),
)paint and isolate
Every frame, Flutter repaints the paint tree. RepaintBoundary isolates the subtree in a separate layer so that even if the parent changes, the subtree is not repainted. It is ideal for separating an animated section from a static list.
Practice Create a RepaintBoundary widget
In main, create a RepaintBoundary widget: give Container(width: 50) as child. Print the widget's runtimeType.
Starter code
import 'package:flutter/material.dart';
void main() {
// RepaintBoundary oluştur, çocuğu 50 genişliğinde bir Container
// runtimeType yazdır
}Sample solution
import 'package:flutter/material.dart';
void main() {
final widget = RepaintBoundary(
child: Container(width: 50),
);
print(widget.runtimeType);
}Expected output
RepaintBoundary
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does RepaintBoundary do?
- Frees memory
- Isolates repainting of child widgets Correct answer
- Computes widget size
- Manages state
Explanation: RepaintBoundary puts the subtree in a separate paint layer; even if the parent changes the content is not repainted, avoiding unnecessary paint work.
2 Use RepaintBoundary
____(
child: MyExpensiveWidget(),
)RepaintBoundary(
child: MyExpensiveWidget(),
)Explanation: RepaintBoundary creates a paint boundary; ClipRect is for clipping, Opacity for transparency, SizedBox for sizing.
3 RepaintBoundary matches
| Term | Meaning |
|---|---|
RepaintBoundary |
Paint boundary |
paint |
Drawing operation |
isolate |
Separate layer |
child |
Boundary content |