๐Ÿ–Œ๏ธ 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

  1. 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;
}
  1. 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.