RepaintBoundary

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.

Exercise Create a RepaintBoundary widget

In main, create a RepaintBoundary widget: give Container(width: 50) as child. Print the widget's runtimeType.

Show example solution

import 'package:flutter/material.dart';

void main() {
  final widget = RepaintBoundary(
    child: Container(width: 50),
  );
  print(widget.runtimeType);
}

Test yourself

What does RepaintBoundary do?
- Frees memory
- Isolates repainting of child widgets
- Computes widget size
- Manages state
Show answer

Isolates repainting of child widgets — RepaintBoundary puts the subtree in a separate paint layer; even if the parent changes the content is not repainted, avoiding unnecessary paint work.

Use RepaintBoundary

____(
  child: MyExpensiveWidget(),
)

Show answer

RepaintBoundary(
  child: MyExpensiveWidget(),
)

RepaintBoundary matches

RepaintBoundary

Paint boundary
paint

Drawing operation
isolate

Separate layer
child

Boundary content

Next lesson: const and ListView.builder

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies