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 size, which defaults to size must not be null.

isComplex and willChange are hints to the compositor's raster cache and must not be null.

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: Center(
    child: Text(
      'Once upon a time...',
      style: const 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.


foregroundPainter CustomPainter
The painter that paints after the children.
isComplex bool
Whether the painting is complex enough to benefit from caching. [...]
painter CustomPainter
The painter that paints before the children.
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. [...]
child Widget
The widget below this widget in the tree. [...]
final, inherited
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


createRenderObject(BuildContext context) RenderCustomPaint
Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget. [...]
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.
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. [...]
createElement() SingleChildRenderObjectElement
RenderObjectWidgets always inflate to a RenderObjectElement subclass.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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
Returns 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.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited