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),
)
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,
),
),
);
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: ...
);
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),
),
);
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