Custom Painter In Flutter

A widget that provides a canvas on which to draw during the painting phase

Today we are going to discuss custom painters, first we will look at when to hire a custom painter, how custom painters work, and last but not least we will have a look at some of the projects of flutter custom painters.

What is a custom painter and when should you use it in general? A custom painter is the ability to draw directly on the canvas of flutter almost all widgets use the painting layer if you recall the flutter architecture there is a painting layer beneath widgets.

that means you don’t necessarily need a widget to paint something on the canvas that allows you to directly create points and paths and arcs and things like that directly on the canvas and draw on it.

so imagine some widgets or some ideas a logo or something that you would like to animate a perfect option for a custom painter alright so now that we have that covered you know now when to use the custom painter.

What is Custom Paint?

The Custom Paint widget in the Flutter SDK lets you draw different shapes on a canvas. It contains the following properties:

• painter: Before the child is painted, the painter paints. It is necessary to extend Custom Painter in this case.
• size: This Custom Painter's size is initially equal to Size.zero, which means that if no child or size is defined, it will not appear.
• Foreground Painter: The painter who paints after the children. Also it takes a class that extends the class Custom Painter.
• child: The widget below this widget tree.

You have two choices when using Custom Paint: either specify a size property without a child or use the child property to give it a widget.

How does the custom painter actually work? It is a class you can extend with the custom painter class and you can use it the same way you would any other widget, but the important thing is that the surrounding widget’s size and height will be passed down to the custom painter as the canvas size.

we will see in a second what this means the custom painter consists of two methods the paint method and they should repaint method.

the paint method gets the canvas and the size of the parent widget inside of it with that you can now draw the canvas is the graphical representation with that you can directly execute commands like draw circle draws a line draw a path.

while the size gives you the height and the size of the widget that contains it that does not mean you cannot draw outside of this widget but it gives you an indication on how big your actual converse should be.

if you are starting with point zero zero you’re on the top left of the canvas and from there you can start to draw wherever you want so that’s it for the method paint for now.

Our discussion of shouldRepaint will happen later because we’ll be drawing something, but now let’s take a quick look at shouldRepaint method. ShouldRepaint method is a method that’s called every time the class is re-initiated. As a result, whenever you scroll through your widget or widget tree and dispose that class and then return to it, it checks if I should repaint this widget, giving you some control over whether you want to redraw it all the time.

It’s possible that random things happen to it or that you render it when I’m telling you or even never render it again, so if it is once drawn and reused, you can greatly improve performance.

all right but come back once more to the paint method inside of here we want now to paint on the canvas.

canvas.drawPoints(PointMode.points, points, paint1);

so we use canvas.draw path for example for that we have two classes the first one is a path that we have to initialise and in the path we give the information about the way on how we want to draw our line.

so from point a to b then we want to draw an arc after that we want to go from point c to point d this is the path information where we want to draw the line.

we have on the other side the paint class the paint class gives information about colour styling and size for example of your stroke that you want to do so if we say canvas dot draw path then we have to pass in first the path and second to paint to draw this line and as you can see immediately in the app appears correctly with these lines good then there is the possibility to paint text actually so makes sense right.

there is a text painter class which you can use to also paint directly text on it so if you don’t want to write every line you want to make every line for your text you can use the text painter which does the same thing for you already and has some predefined classes.

so i mentioned already the arcs what is an arc an art is just a circle that you want to draw so an arc is a half circle that you can draw and if you have two points like,

point a and point b an arc would be a half circle from there to there and you can pass in for example information like radius and deepness and things like that to draw this arc very easily and with that you have drawn your arc.

you can draw from there wherever you want another thing that you can do is the bezier curve if you have never heard about it i found it actually very interesting because i usually use it in Photoshop whenever you use the pen tool you can go from one point to another point and if you keep clicking that with pen tool and drag it away then you can see that the curve appears and this is the bezier curve so it appears a new point point a third point for your a and b and you get a fair point which gives the information about how you want to make the curve happening and you can move that along good.

As a result, we can see how the custom painter works. We all know that when you re-render a lot of things, you need to repaint correctly if you don’t, and if you use a lot, that could affect your performance. Don’t do that. In general, understanding and getting a little more in depth into it makes a great deal of fun, so I highly recommend you do it all correctly.So that’s all the information of Custom painter, that I want to describe in short. I took it from many websites as some research if you find out any wrong info or misdirected, please point out or comment below.

If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

Shirsh Shukla is All about flutter 💙💙💙💙