Summary - Custom render

Combine RenderBox, performLayout and paint to make a custom widget.

Summary - Custom render

To build a custom render widget, three pieces come together: extend RenderBox, compute size with performLayout, and draw with paint. Together they give Flutter's render system a custom object.

class ColorBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawRect(
      offset & size,
      Paint()..color = Colors.green,
    );
  }
}

Exercise Define ColorBox

Define ColorBox as a RenderBox. In performLayout, set size = constraints.biggest. In paint, call context.canvas.drawRect(offset & size, Paint()..color = Colors.green). In main, create a ColorBox instance and print its runtimeType.

Show example solution

import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';

class ColorBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawRect(
      offset & size,
      Paint()..color = Colors.green,
    );
  }
}

void main() {
  final box = ColorBox();
  print(box.runtimeType);
}

Test yourself

Which three components come together to write a custom render object?
- State + setState + build
- Navigator + Route + MaterialPageRoute
- RenderBox + performLayout + paint
- Widget + Element + BuildContext
Show answer

RenderBox + performLayout + paint — A custom render object is made by extending RenderBox, computing size with performLayout, and drawing with paint; Widget/Element/BuildContext are tree concepts.

drawRect call

context.canvas.____(offset & size, paint);

Show answer

context.canvas.drawRect(offset & size, paint);

Custom render summary matches

RenderBox

Custom render object
performLayout

Layout step
paint

Paint step
Canvas

Drawing tool

Next lesson: Plugin structure

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies