Render tree

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.

Exercise 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.

Show example 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);
}

Test yourself

Which two operations does the RenderObject tree perform?
- State and setState
- Event and callback
- Layout and paint
- HTTP and JSON
Show answer

Layout and paint — The RenderObject tree computes sizes via layout and draws to the screen via paint; it does not deal with state or HTTP.

Set the size

size = constraints.____;

Show answer

size = constraints.biggest;

Render tree matches

RenderObject

Does layout and paint
layout

Computes size
paint

Draws
constraints

Bounds from parent

Next lesson: Build owner

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies