Taking actual visible space

[creativecreatorormaybenot]

First up, this is a really cool package! Thanks for creating it ❤️

Use case

It would be useful if the DashedLine widget was the same size as the visible dashed line instead of the size of the control points.

Proposal

Add option to the DashedLine widget to take up the size that the displayed path will take up.

Current note

I am aware of the note you added to your README, however, I actually think it is somewhat misleading:

Due to how Paths work in Flutter and Skia, the DashedLine widget takes NOT as much space as the dashed line needs, but as much it needs to contain all the control points.

This suggests that this is a limit of the Flutter rendering engine while it is obviously not. You are free to define the size of your render objects however you please.

Implementation

I assume you are using Path.getBounds for the bounds of your DashedLine widget (I have not looked into the implementation).

This, of course, returns the control points. I am not sure if Path.computeMetrics makes figuring out the actual visible bounds any easier, but you can always calculate it yourself if the existing implementation does not provide it for you.
This is clearly possible and probably also fairly trivial (considering the existing work on bezier curves et al.)

[salah-rashad]

Actually, I had to refactor the code and remove some lines making this way simpler to use.

import 'package:flutter/rendering.dart';

extension CanvasExt on Canvas {
  void drawDashedLine({
    required Path path,
    required Paint paint,
    required double dashLength,
    required double dashSpace,
  }) {
    final pathMetrics = path.computeMetrics();
    for (final pathMetric in pathMetrics) {
      for (double dist = 0;
          dist < pathMetric.length;
          dist += dashLength + dashSpace) {
        final dashPath = pathMetric.extractPath(dist, dist + dashLength);

        drawPath(dashPath, paint);
      }
    }
  }
}

Usage:

@override
void paint(Canvas canvas, Size size) {
  ...
  
  canvas.drawDashedLine(
    path: path,
    paint: paint,
    dashLength: 16,
    dashSpace: 8,
  );
}