This Flutter Canvas library allows you to draw dotted straight line and arc with the array syntax of html5 canvas.

Similar to this, this library lets you draw dotted line and arc with varying gaps and lengths using the HTML5 canvas's setLineDash() array syntax.

Import this package and follow the syntax provided below.

setLineDash()

setArcDash()

Note: For the setArcDash, I find thinking about each of the dashes' length in degrees, rather than in pixels, more intuitive.

Instead of "this arc dash, when straightened, is 5 pixels long", we can say: "this arc dash, for a circle of radius x, is 30 degrees in length"

Dart

const lineDash = [2, 20];

//straight line
setLineDash(canvas, point1, point2, paint, lineDash);

//Circle or ellipse
setArcDash(canvas, x, y, radiusX, radiusY, paint, startAngle, sweepAngle, lineDash);

JavaScript

ctx.setLineDash([2, 20]);

//Straight Line
ctx.lineTo(x1, y1, x2, y2);

//Circle
ctx.arc(x, y, radius, startAngle, endAngle, [, counterclockwise]);

//Circle or Ellipse
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);

ctx.stroke();

Note: The Flutter examples were captured on a smaller device.

UI design by Natawan Meechai

UI src: https://github.com/Khongchai/yawwn/blob/main/lib/widgets/progress/dotted_line_path_points.dart