๐๏ธ dashed_painter
dashed_painter is a Flutter plugin that helps you easily draw dashed lines and dot-dash patterns on a Canvas.
Ideal for use in CustomPainter, Decoration, or anywhere a Canvas is used.
๐ Installation
Add the package to your pubspec.yaml:
dependencies:
dashed_painter: ^1.0.0
flutter pub add dashed_painter
๐จ Usage
- Drawing with CustomPainter
class MyDashedLinePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..strokeWidth = 2
..style = PaintingStyle.stroke;
final path = Path()
..moveTo(0, 0)
..lineTo(size.width, 0);
const DashedPainter(span: 4, step: 8).paint(canvas, path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
- Drawing with DashedDecoration (BoxDecoration-like)
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2,
),
borderRadius: BorderRadius.circular(20),
decoration: const DashedDecoration(
span: 4,
step: 8,
),
),
)
You can also use gradients:
decoration: DashedDecoration(
step: 6,
span: 3,
strokeWidth: 1.5,
radius: Radius.circular(12),
gradient: SweepGradient(colors: [Colors.red, Colors.green, Colors.blue]),
),
โจ Features
โ Draw solid dashed lines
โ Draw dot-dash patterns
โ Supports drawing on arbitrary shapes and complex paths
โ Fully customizable step, span, and dot details
โ Works with Canvas or BoxDecoration
โ Gradient support via DashedDecoration
โ Lightweight, no custom widget required
๐งฉ API DashedPainter
| Property | Description | Type | Default |
|---|---|---|---|
span |
Space between each dash segment | double |
4.0 |
step |
Length of each dash segment | double |
9.0 |
pointCount |
Number of dots per segment (for dot-dash) | int |
0 |
pointWidth |
Length of each dot (if pointCount > 0) |
double? |
null (falls back to strokeWidth) |
๐งฑ API DashDecoration
Includes all properties from DashedPainter:
| Property | Description | Type |
|---|---|---|
radius |
Corner radius of the border rectangle | Radius? |
strokeWidth |
Thickness of the dashed line | double |
color |
Border color (ignored if gradient is set) |
Color? |
gradient |
Border gradient (SweepGradient, etc.) |
Gradient? |
๐ Example Structure
dashed_painter/
โโโ lib/
โ โโโ dashed_painter.dart
โโโ lib/
โ โโโ dashed_decoration.dart
โโโ example/
โ โโโ lib/
โ โโโ main.dart
โ โโโ benchmark_painter.dart
โโโ test/
โ โโโ dashed_painter_test.dart
โโโ README.md
โโโ LICENSE
โโโ pubspec.yaml
๐ฆ Example
Try the interactive benchmark and decoration examples in the example/ project:
cd example
flutter run
๐งช Testing Unit tests for internal logic (step/span calculations) are included in /test.
To run:
flutter test
๐ License
This project is licensed under the MIT License.