A Deep Dive Into CustomPaint in Flutter

Exploring CustomPaint and CustomPainter to add a Canvas to your app

NEW: I wrote a better and more comprehensive guide to CustomPaint -

If you are starting out with Flutter, you may not have heard of or used the CustomPaint widget a lot. Most widgets in the framework take care of common features and functionality and even when they don’t, you rarely need to draw it yourself since customizations like rounding corners, changing opacity, substituting colors, etc. are all easily doable.

Most if not all UI frameworks provide a Canvas API — a way for drawing custom graphics that does not involve existing UI components. A Canvas is pretty much what is sounds like: you can draw lines, shapes, curves, etc. using the Paint (color, stroke, …) you prefer. This allows you to render custom components which can be exactly the shape and size you want them to be.

In Flutter the CustomPaint widget provides a Canvas for us to use. We use the CustomPainter class to actually draw our graphics on the screen. The three main things to take a look at are: CustomPaint, CustomPainter, and the Canvas class. Let’s start.

As aforementioned, the CustomPaint widget supplies the Canvas while the CustomPainter is where we write logic for painting. Let’s look at purely the widget first.

There are three things important in the widget parameters:

The painter and foregroundPainter are both CustomPainters which define what is drawn on the canvas. However, the instructions from the painter are drawn first. After that, the child is rendered OVER the background. And finally, the instructions from the foregroundPainter are drawn over the child.

By default the size of the widget is the child size. When the child is null, it uses the value of the size parameter given to it.

Now that we have a CustomPaint widget which will provide the Canvas, we need to actually paint something. To do this, we subclass the CustomPainter class to create our own.

There are two major functions:

The paint() function supplies the actual Canvas instance which we can use to invoke the drawing functions. It also gives us the size of the canvas which is either the child size or supplied through the size param.

Let’s look at the actual drawing logic by exploring the Canvas class next.

What has been shown till now should be familiar to most people who who have used the CustomPaint widget a few times. In this section we will go into drawing things on a Canvas and all the possibilities that it offers.

All the drawing mentioned here will be done inside the paint() method of the CustomPainter.

The paint class stores attributes related to painting or drawing objects on the screen. Here are a couple of important attributes:

A Rect class creates a virtual rectangle with a width and height usually to draw an actual rectangle or set bounds for a shape inside. There are multiple ways to create a Rect such as:

There are functions in the CustomPainter that help us draw common shapes such as circles and rectangles. However, when we need to draw custom shapes, paths allow us to trace out a custom shape.

Points (circles) and lines can be drawn on the canvas using the canvas.drawCircle() and canvas.drawLine() method respectively.

In the canvas.drawCircle() method, we supply a position to draw the circle at, the radius of the circle, and the paint attributes for painting the circle.

This pretty much just gives us a point at the center of the screen:

Here, we draw a line across the screen instead. We supply two points to draw the line between and the paint attributes. The first point is the left of the screen along half the height going towards the second point, which is at the same height on the other side of the screen.

To fill the entire canvas with a color, we can use the canvas.drawColor() function which colors the entire canvas with a color.

The BlendMode defines how the color is painted over the existing elements on the canvas.

Text can be rendered on the canvas as well — using the canvas.drawParagraph() method.

This requires quite a lot more setup than we’re used to using the Text widget.

We can draw an arc of a circle using the canvas.drawArc() method. This makes it easy for us to create Pacman:

As mentioned in the earlier section, the Path class allows us to create custom shapes. Once created, the path can be drawn on the canvas using the canvas.drawPath() method.

This article summarized the basics of the CustomPaint widget. Future articles will dive into more complex topics such as Shaders, BlendModes, etc.

My best use of the CustomPaint widget lies in creating generative art in Flutter. I use the widget to create procedurally generated artworks like this one:

Related posts:

Unlick Github Copilot, OpenAI does not offer an IDE plugin to help devs for coding, but it does not mean, we cannot use ChatGPT for free as a coding assistant. It was mentioned the color schema in…

Unicode is an encoding for textual characters which is able to represent characters from many different languages from around the world. Each character is represented by a unicode code point. A code…

December began peacefully enough. I started the month with gathering photos to fit Flickr themes and doing a photo walk to confirm some mapping I had done on some Flickr photos. Three days later on…