Render tree
- Flutter course
- Expert
- Lesson 3/39
- 4 min
Learn that the RenderObject tree lays out and paints.
Render tree
The RenderObject tree is the tree that performs layout and paint. Each Element creates the corresponding RenderObject; this object computes screen position, size and drawing. layout measures, paint draws.
class MyRenderBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
// drawing
}
}performLayout and paint
In a RenderBox, performLayout sets the size, paint performs drawing. constraints are the size bounds coming from the parent. Layout flows constraints top-down; paint draws bottom-up.
Practice Define a RenderBox
Define MyRenderBox as a RenderBox. In performLayout, set size = constraints.biggest. In paint, draw a circle on context.canvas with center offset + Offset(50, 50), radius 20, Paint()..color = Colors.red. In main, create a MyRenderBox instance and print its runtimeType.
Starter code
import 'package:flutter/material.dart';
// MyRenderBox sınıfını RenderBox olarak tanımla
// performLayout size'ı constraints biggest ata
// paint metodu canvas ile daire çiz (merkez offset, 20 yarıçap, kırmızı)
// main'de MyRenderBox örneği al ve runtimeType yazdır
void main() {
// MyRenderBox örneği al ve runtimeType yazdır
}Sample solution
import 'package:flutter/material.dart';
class MyRenderBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
final canvas = context.canvas;
canvas.drawCircle(
offset + const Offset(50, 50),
20,
Paint()..color = Colors.red,
);
}
}
void main() {
final renderBox = MyRenderBox();
print(renderBox.runtimeType);
}Expected output
MyRenderBox
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which two operations does the RenderObject tree perform?
- State and setState
- Event and callback
- Layout and paint Correct answer
- HTTP and JSON
Explanation: The RenderObject tree computes sizes via layout and draws to the screen via paint; it does not deal with state or HTTP.
2 Set the size
size = constraints.____;size = constraints.biggest;Explanation: constraints.biggest returns the largest size allowed by the parent; smallest returns the smallest, width and height are double values.
3 Render tree matches
| Term | Meaning |
|---|---|
RenderObject |
Does layout and paint |
layout |
Computes size |
paint |
Draws |
constraints |
Bounds from parent |