Flutter CustomPainter — Part #2?
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
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!
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 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
Note: It is important to remember this order, so that you can make an appropriate decision, when or when not to use 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
The following figure shows the order in which the
CustomPaint object paints its contents: —
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.
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.
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
CustomPaintobject resizes itself to the size of its
childand the value specified for its
sizeproperty, if any, is ignored.
- If you do not provide a
CustomPaintobject, and also do not set its’
sizeproperty, the default size of the
CustomPaintis set to zero.
sizeproperty of a
CustomPaintobject cannot be set to a
null, if no child is provided to the
CustomPaintobject. In its default state, the
sizeproperty has a value of
- If no
childis specified and you set its
sizeproperty, then the
CustomPaintobject takes on the size specified in the
sizeproperty of the
The following figures tries to simplify the matters further: —
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: —
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: —
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!