dotted_border

Description:

dotted border

Dotted Border #

A flutter package to easily added dotted borders around widgets.
Installing #
To use this package, add dotted_border as a dependency in your pubspec.yaml file.
Usage #
Wrap DottedBorder widget around the child widget
DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)
copied to clipboard
BorderTypes #
This package supports the following border types at the moment

RectBorder
RRectBorder
CircleBorder
OvalBorder

Example
return DottedBorder(
borderType: BorderType.RRect,
radius: Radius.circular(12),
padding: EdgeInsets.all(6),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(12)),
child: Container(
height: 200,
width: 120,
color: Colors.amber,
),
),
);
copied to clipboard
Dash Pattern #
Now you can also specify the Dash Sequence by passing in an Array of Doubles
Example
DottedBorder(
dashPattern: [6, 3, 2, 3],
child: ...
);
copied to clipboard
The above code block will render a dashed border with the following pattern:

6 pixel wide dash
3 pixel wide space
2 pixel wide dash
3 pixel wide space

Custom Path Border #
You can also specify any path as the customPath property when initializing the DottedBorderWidget, and it will draw it for you using the provided dash pattern.
Example
Path customPath = Path()
..moveTo(20, 20)
..lineTo(50, 100)
..lineTo(20, 200)
..lineTo(100, 100)
..lineTo(20, 20);

return DottedBorder(
customPath: (size) => customPath, // PathBuilder
color: Colors.indigo,
dashPattern: [8, 4],
strokeWidth: 2,
child: Container(
height: 220,
width: 120,
color: Colors.green.withAlpha(20),
),
);
copied to clipboard
Stroke Cap #

PR submitted by Tarekk Mohamed Abdalla

You can set a StrokeCap to the border line endings. It can take three values

StrokeCap.Round
StrokeCap.Square
StrokeCap.Butt

Output

Credits #

Flutter Path Drawing - Dan Field