dashed_painter 1.0.2 copy "dashed_painter: ^1.0.2" to clipboard
dashed_painter: ^1.0.2 copied to clipboard

A simple Flutter plugin to draw dashed lines and shapes on canvas easily.

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

2
likes
120
points
21
downloads

Publisher

unverified uploader

Weekly Downloads

A simple Flutter plugin to draw dashed lines and shapes on canvas easily.

Documentation

API reference

License

MIT (license)

Dependencies

flutter, plugin_platform_interface

More

Packages that depend on dashed_painter

Packages that implement dashed_painter