DEV Community

loading...
Innovation Incubator

Flutter : How to draw with custom painter

tkpranav profile image tkpranav Originally published at Medium on ・1 min read

Flutter : How to draw with custom painter

What is custom painter ?

Custom painter is used to draw standard as well as custom shapes on the screen and is very powerful, it let’s you draw anything that you can think about.

All you need is a little imagination and a little maths.

Here is a simple basic quick run so you don’t need to worry about technicalities and get straight to painting.

Created with custom painter.

1.Custom Paint.

In widget tree, we only have to add the CustomPaint widget and give it a painter.

2.Custom Painter.

Create MyCustomPainter class and add two required methods.

Paint method defines what we want to draw or paint on the canvas.

ShouldRepaint method defines when we want to repaint the canvas.

Shown below is a simple breakdown image of the canvas:

3. Draw Circle

To draw a circle specify the center, radius and the color of the circle.

4. Rectangle

To draw a rectangle specify center height and width.


Discussion (0)

pic
Editor guide