Flutter CustomPainter — Part #2?

Photo by: Isra Itrat Rafiqi

The CustomPaint widget provides us with the Canvas and its size. It’s an important widget that gives us access to the low-level graphics in Flutter so we can create highly customizable user interfaces.

If you’ve been following, in the previous part of this series, we worked our way through canvas, axes, offsets, and much more. In this part, we are going to take a short detour and get ourselves acquainted with the CustomPaint widget. So, say hello to the CustomPaint widget!

Widgets in Flutter:

Flutter provides us with tons of out-of-the-box widgets, that we can use in order to create beautiful user interfaces. If you aren’t sure about whether a particular widget already exists, don’t forget to checkout the Flutter Widgets Catalog.

Among these countless collection of widgets, it also provides us with a special widget called the CustomPaint — which gives us access to the low-level graphics, that we can use to create highly customizable user interfaces with breathtaking animations.

Why use CustomPaint widget?

Though, Flutter has a large collection of pre-built widgets, and hundreds and thousands of custom widgets are already showing up every single day on pub.dev, but what if you still want to create something unique, something that sets your app or product apart from others; where you have total control and can pour in your creativity. Well, thats exactly where the CustomPaint object comes into play, as it provides us with a Canvas and its’ size on which we can paint pretty much anything and make that into a fully functional and re-usable widget.

You get the canvas and you get the brush, the rest is how far you can push your imagination and creativity!

The CustomPaint class:

The Flutter API describes the CustomPaint widget as the ‘one that provides a canvas on which to draw during the paint phase’. You must memorize and permanently etch this thing on your mind, that the CustomPaint widget provides you with the canvas and its size. It is a very important detail to remember!

Though, the CustomPaint object does provide us with the canvas and its size, but the actual magic of drawing takes place in the CustomPainter widget. But, even before we can get our hands dirty with that, we must understand some of the most important and most common properties of the CustomPaint widget itself.

The following are some of the most common and important properties supported by the CustomPaint widget, and in the following paragraphs, we will rip all of them apart one-by-one. So, buckle up!

• painter
• foregroundPainter
• size
• child

painter: —

The painter is actually an instance of the CustomPainter class. When the Flutter Engine asks the CustomPaint widget to start painting, the instance of CustomPainter provided to the painter argument is painted first. Once the contents of the painter are painted, next the CustomPaint widget paints its child.

Note: It is important to remember this order, so that you can make an appropriate decision, when or when not to use the painter property.

foregroundPainter: —

The foregroundPainter is also an instance of the CustomPainter class. The only difference is that, when the Flutter Engine asks the CustomPaint to start painting, it paints the the contents of the foregroundPainter after it paints its child.

The following figure shows the order in which the CustomPaint object paints its contents: —

CustomPaint painting order

It is important to remember this order, because there may be times when you would want to draw something in the background of the child. Or else, you may want to draw something over the child. The reasons and combinations are completely up to you to decide.

Note: The painter, backgroundPainter, child are all named optional parameters. So, you don’t need to necessarily provide all of them at once, only the ones that fit your arrangement or requirement.

Size: —

The size property controls the size of the CustomPaint object. However, its’ important to understand that since the CustomPaint object provides us with the Canvas, setting its size property also indirectly sets the size of the canvas. However, when it comes to setting the size of a custom paint object, a few important things should be kept in mind: —

• If you provide a child to a CustomPaint object, the CustomPaint object resizes itself to the size of its child and the value specified for its size property, if any, is ignored.
• If you do not provide a child to a CustomPaint object, and also do not set its’ size property, the default size of the CustomPaint is set to zero.
• The size property of a CustomPaint object cannot be set to a null, if no child is provided to the CustomPaint object. In its default state, the size property has a value of Size.zero.
• If no child is specified and you set its size property, then the CustomPaint object takes on the size specified in the size property of the CustomPaint object.

The following figures tries to simplify the matters further: —

Demonstrates, how to set the size of a CustomPaint object

Nevertheless, there are times when you would want to set the size of a CustomPaint object to the size of its parent, whatever, that may be. The general recipe in this case, is to set the value of size property of a CustomPaint object to Size.infinite and wrap the CustomPaint widget within an Align object. Why wrap inside the Align widget? Don’t worry, it will become clearer, when we start working with the examples, later!

Note: There may be times when wrapping within an Align widget may not be necessary.

The following figure demonstrates, how you can set the size of a CustomPaint object to match the size of its parent: —

CustomPaint widget sized to match its parent

The following code snippet should give you a taste of how to use the CustomPaint object. All of the most common properties are specified only for illustration, and may not be required in all cases: —

Using CustomPaint widget

That pretty much concludes our tour of the CustomPaint object. So far, we having only been talking about the canvas, offsets, the canvas coordinate system, the CustomPaint widget and didn’t get any chance to actually draw anything on the canvas. Hold on to your horses! Getting these things out of the way was necessary in order to lay a strong foundation and become good at drawing things on the canvas.

In the next part of this series, I am going to introduce you to the much awaited CustomPainter class. I will see you soon!

Connect with me: github | pub.dev| twitter | instagram