Flutter: CustomPaint

Tram Ho

Flutter offers a huge amount of widgets for interface building, but you’re still not satisfied. You want to create a unique, unique widget that you have to come to CustomPaint. It will help you do what you want.

CustomPaint gives us access to low-level – graphics when Flutter draws a widget. It is like custom views on Android or iOS but will be simpler and more intuitive when combined with Flutter’s HotReload.

In this article I will introduce the use of CustomPaint to draw simple shapes.


Declare to use 1 CustomPaint

Some important properties of CustomPaint:

  • child : By default, the canvas takes the size of the child, if it is specified.
  • painter : A painter was drawing before the child was drawn.
  • foregroundPainter : A painter was drawn after the child was drawn (over them).
  • size : If the child is not declared, the size of the canvas must be specified.

In the scope of this article, we will only need two properties, paint and child . In the above code, I have declared child the Container , as you know if there is no child container it will take up all the space it is allowed to have.

Now we need to define the ShapePainter widget that will extend the CustomPainter class


CustomPainter is an abtract class so ShapePainter has to override two methods:

  • paint : This method is called whenever the object needs to be redrawn.
  • shouldRepaint : This method is called when a new instance of the class is provided.

The paint method has two parameters: canvas, size. If CustomPaint has a child, the canvas will be the same size as the child. In this case the cavas will be the size of the entire screen – the space portion of the AppBar.

Canvas Area

Before we draw anything on the canvas, we need to understand its coordinate system. Canvas has the coordinate system as shown below:

You can see that the origin – origin (0, 0) is in the upper left corner of the canvas. Every stroke will be linked to the origin – origin, where the painter started.

Draw Line

Now, I will draw a horizontal line in the middle of the screen (as if it were dividing the screen into two halves vertically).

To draw a line he needs two points, so that when connecting those two points, we will have the desired line.

Variable paint – an instance of Paint, it looks like a brush and helps to specify the color, stroke, stickiness of the stroke, etc.

Two Offset variables specify the starting and ending position coordinates.

The drawLine method is called on the canvas to draw a line between the two Offset positions and the paint variable is also passed for this method.

The shouldRepaint return false method because there is no need to redraw the line.

  • Another way to draw a line is to use paths

When using paths, you will need to specify another property for the paint variable, style (here is PaintingStyle.stroke). If you do not specify this property, the line will not be displayed.

  • moveTo: is used to change the current position of the point to the specified coordinate.
  • lineTo: used to draw a line from current point to specified point on canvas.
  • drawPath: called on the canvas to draw the path on the screen

Code: https://dartpad.dev/0f1e8a36c2a716f2cb46ca853df54749 ?

Draw Circle

You can draw a simple circle centered (size.width / 2, size.height / 2), i.e. at the center of the Container, by calling the canvas’s drawCircle method or by using Path.

  • drawCircle

drawCircle needs an Offset which is the center coordinates of the circle, the radius of the circle and paint

  • addOval () of Path

path.addOval : This method is used here to draw a circle with the center center of the screen and with radius = 100 pixels.

Code: https://dartpad.dev/8e49a84dd72a64971a377478f99a54ec ?

To be continued …

The article is referenced here

Share the news now

Source : Viblo