Drawing Curved Dashed Lines in Flutter

Meysam Mahfouzi
4 min readMar 8, 2019

In this article we are going to draw a curved dashed line like the following:

I suppose you are already familiar with how to draw custom shapes and lines in Flutter. If not, you can read the article I wrote on this topic.

Let’s get started by creating our main file:

The drawing will happen in the DrawingPage class:

As usual, our page starts with Scaffold which has an appBar and a body which is set to an instance of CustomPaint widget.

The empty Container I have used (for the child property) will expand and fill the whole screen, therefore the size of our canvas will be as big as the whole screen (again if you don’t understand why, please read the article I wrote on this topic.).

And here goes theCurvePainter class:

We will implement the paint method to draw the curve line.

To draw bezier lines we need four points: the start point, the end point and also two control points, just like in the following picture. Moving the control points changes the slope of the curve. You can play with the control points in this online tool.

We can draw bezier curves using the cubicTo method of the Path class:

void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)

--

--