What is RenderObject?

Build a render object from scratch with RenderObject.

What is RenderObject?

RenderObject is the basic unit of drawing in Flutter; it computes size with layout and draws to the screen with paint. To write a custom render object from scratch, you extend RenderObject and override paintBounds and performLayout; paint is also added for drawing.

class MyRender extends RenderObject {
  @override
  Rect get paintBounds => Rect.zero;

  @override
  void performLayout() { /* size */ }

  @override
  void paint(PaintingContext context, Offset offset) { /* drawing */ }
}

Layout vs paint

layout determines the size using the constraints coming from the parent; paint performs drawing using the computed size. Layout always runs before paint.

Exercise Define a RenderObject

Define MyRender as a RenderObject. Override paintBounds to return Rect.zero, and override performLayout and paint with empty bodies. In main, create a MyRender instance and print its runtimeType.

Show example solution

import 'package:flutter/rendering.dart';

class MyRender extends RenderObject {
  @override
  Rect get paintBounds => Rect.zero;

  @override
  void performLayout() {
    // layout
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    // paint
  }
}

void main() {
  final render = MyRender();
  print(render.runtimeType);
}

Test yourself

Which are overridden when extending RenderObject?
- initState and build
- createElement and mount
- paintBounds and performLayout
- createState and dispose
Show answer

paintBounds and performLayout — Since RenderObject is abstract, the paintBounds getter and performLayout method must be overridden; paint is optional.

Extend RenderObject

class MyRender extends ____ {

Show answer

class MyRender extends RenderObject {

RenderObject matches

RenderObject

Drawing unit
layout

Pre-draw measurement
paint

Screen drawing
performLayout

Layout trigger

Next lesson: RenderBox

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies