CustomPaint class

A widget that provides a canvas on which to draw during the paint phase.

When asked to paint, CustomPaint first asks its painter to paint on the current canvas, then it paints its child, and then, after painting its child, it asks its foregroundPainter to paint. The coordinate system of the canvas matches the coordinate system of the CustomPaint object. The painters are expected to paint within a rectangle starting at the origin and encompassing a region of the given size. (If the painters paint outside those bounds, there might be insufficient memory allocated to rasterize the painting commands and the resulting behavior is undefined.) To enforce painting within those bounds, consider wrapping this CustomPaint with a ClipRect widget.

Painters are implemented by subclassing CustomPainter.

Because custom paint calls its painters during paint, you cannot call setState or markNeedsLayout during the callback (the layout for this frame has already happened).

Custom painters normally size themselves to their child. If they do not have a child, they attempt to size themselves to the specified size, which defaults to The parent may enforce constraints on this size.

The isComplex and willChange properties are hints to the compositor's raster cache.

This example shows how the sample custom painter shown at CustomPainter could be used in a CustomPaint widget to display a background to some text.
  painter: Sky(),
  child: const Center(
    child: Text(
      'Once upon a time...',
      style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.w900,
        color: Color(0xFFFFFFFF),

See also:

  • CustomPainter, the class to extend when creating custom painters.
  • Canvas, the class that a custom painter uses to paint.


CustomPaint({Key? key, CustomPainter? painter, CustomPainter? foregroundPainter, Size size =, bool isComplex = false, bool willChange = false, Widget? child})
Creates a widget that delegates its painting.


child Widget?
The widget below this widget in the tree.
foregroundPainter CustomPainter?
The painter that paints after the children.
hashCode int
The hash code for this object.
no setterinherited
isComplex bool
Whether the painting is complex enough to benefit from caching.
key Key?
Controls how one widget replaces another widget in the tree.
painter CustomPainter?
The painter that paints before the children.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
size Size
The size that this CustomPaint should aim for, given the layout constraints, if there is no child.
willChange bool
Whether the raster cache should be told that this painting is likely to change in the next frame.


createElement() SingleChildRenderObjectElement
RenderObjectWidgets always inflate to a RenderObjectElement subclass.
createRenderObject(BuildContext context) RenderCustomPaint
Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
didUnmountRenderObject(covariant RenderCustomPaint renderObject) → void
A render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object's createRenderObject.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel =}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.
updateRenderObject(BuildContext context, covariant RenderCustomPaint renderObject) → void
Copies the configuration described by this RenderObjectWidget to the given RenderObject, which will be of the same type as returned by this object's createRenderObject.


operator ==(Object other) bool
The equality operator.