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
As usual, our page starts with
Scaffold which has an
appBar and a
body which is set to an instance of
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 the
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
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)