paint method

Draw inside the paint method.

paint method

The paint method draws the render object to the screen. It takes two parameters: PaintingContext context for the drawing context, and Offset offset for the top-left corner position. Drawing is done via context.canvas.

@override
void paint(PaintingContext context, Offset offset) {
  context.canvas.drawRect(
    offset & const Size(50, 50),
    Paint()..color = Colors.blue,
  );
}

context.canvas

PaintingContext manages the drawing context; you reach the Canvas via context.canvas. offset specifies the position in the parent tree; drawing coordinates are shifted accordingly.

Exercise Define RectBox

Define RectBox as a RenderBox. In performLayout, set size = constraints.constrain(const Size(100, 50)). In paint, call context.canvas.drawRect with rect offset & const Size(100, 50) and paint Paint()..color = Colors.blue. In main, create a RectBox instance and print its runtimeType.

Show example solution

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

class RectBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.constrain(const Size(100, 50));
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawRect(
      offset & const Size(100, 50),
      Paint()..color = Colors.blue,
    );
  }
}

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

Test yourself

What is the signature of the paint method?
- void paint(Widget w)
- void paint(PaintingContext context, Offset offset)
- void paint(BuildContext ctx)
- void paint(Paint p)
Show answer

void paint(PaintingContext context, Offset offset) — The paint signature is void paint(PaintingContext context, Offset offset); context.canvas gives the drawing surface and offset gives the top-left corner.

Use context.canvas

context.____.drawRect(rect, paint);

Show answer

context.canvas.drawRect(rect, paint);

paint method matches

paint

Drawing method
context

Drawing context
offset

Top-left position
canvas

Drawing surface

Next lesson: Summary - Custom render

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies