What is CustomPaint?

Draw custom shapes with the CustomPaint widget.

What is CustomPaint?

CustomPaint is the Flutter widget used for free-form drawing that standard widgets cannot do. It takes a painter and an optional size; the actual drawing is delegated to the painter object. If you pass a child, the drawing appears behind it.

CustomPaint(
  size: Size(100, 100),
  painter: MyPainter(),
)

The painted area covers the size given by size.

child and size relationship

If you give CustomPaint a child, the drawing stays behind it and size is ignored; the child's size is used. Without a child, size sets the drawing size.

CustomPaint(
  painter: MyPainter(),
  child: Container(width: 80, height: 80),
)

Exercise Create a CustomPaint widget

The MyPainter class is provided. In main, create a CustomPaint of size 100x100 using MyPainter() and print its runtimeType.

Show example solution

import 'package:flutter/material.dart';

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {}

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

void main() {
  final widget = CustomPaint(
    size: Size(100, 100),
    painter: MyPainter(),
  );
  print(widget.runtimeType);
}

Test yourself

Who does the actual drawing in the CustomPaint widget?
- The size parameter
- The BuildContext
- The object in the painter parameter
- The widget in the child parameter
Show answer

The object in the painter parameter — The drawing is done by the CustomPainter object passed to painter; child just sits on top, and size sets the area.

Add the painter parameter

CustomPaint(
  size: Size(50, 50),
  ____: MyPainter(),
)

Show answer

CustomPaint(
  size: Size(50, 50),
  painter: MyPainter(),
)

CustomPaint parts

CustomPaint

Free-form drawing widget
painter

Object that draws
size

Drawing area size
child

Widget on top of the drawing

Next lesson: CustomPainter

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies