dotted_line_array 0.0.3 icon indicating copy to clipboard operation
dotted_line_array: ^0.0.3 copied to clipboard

A Flutter library for drawing dotted line and arc with HTML5 Canvas API's array syntax

dotted_line_array #

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

Features #

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.

Getting started #

Import this package and follow the syntax provided below.

Usage #


Parameter Class Description
canvas Canvas Canvas object
point1 Offset Beginning point
point2 Offset End point
paint Paint Paint object
lineDash List Array of numbers as specified by the HTML5 Canvas API's docs


Parameter Class Description
canvas Canvas Canvas object
x double Center of the arc X
y double Center of the arc Y
radiusX double Arc horizontal radius
radiusY double Arc vertical radius
paint Paint Paint object
startAngle double Starting angle in degrees
sweepAngle double Clockwise sweep amount starting from startAngle, also in degrees

Syntax Comparisons #


//Negative signs are ignored; [2, -2] is the same as [2, 2].
const lineDash = [2, 20];

//straight line
setLineDash(canvas, point1, point2, paint, lineDash);
//Arcs: circle & ellipse (can be used to draw curves from quadratic bezier)
setArcDash(canvas, x, y, radiusX, radiusY, paint, startAngle, sweepAngle, lineDash);


ctx.setLineDash([2, 20]);

//straight line
ctx.lineTo(x1, y1, x2, y2);
//Arc: circle
ctx.arc(x, y, radius, startAngle, endAngle, [, counterclockwise]);
//Arc: quadratic bezier (can be used to draw ellipses)
ctx.arcTo(x1, y1, x2, y2, radius);


Result comparisons (Flutter: purple background, HTML5: white) #

Please excuse the size differences. The flutter examples were captured on a smaller device.

[2, 20]

2,20 dart example

2,20 javascript example

[5, 10, 12]

5,10,12 dart example

5,10,12 javascript example

[1, 20, 0, 5, 2]

1,20,0,5,2 dart example

1,20,0,5,2 javascript example

[20, 3, 3, 3, 3, 3, 3, 3]

20,3,3,3,3,3,3,3 dart example

20,3,3,3,3,3,3,3 javascript example

Example Combining Straight Lines with Arcs #

With [5, 5] for lines and [7.8, 7.8] for arcs #


With [1.0, 2.0, 3.0, 4.0] for lines and [2.0, 4.0, 6.0, 8.0] for arcs #


UI design by Natawan Meechai

UI src:

pub points


verified publisher

A Flutter library for drawing dotted line and arc with HTML5 Canvas API's array syntax

Repository (GitHub)


API reference


Icon for licenses.MIT (LICENSE)




Packages that depend on dotted_line_array