fluentGaugeNeedlePath function

Path fluentGaugeNeedlePath({ required double innerRadius, required double needleLength, required double extraNeedleLength, required double strokeWidth, })

The needle outline, already translated into the frame the rotation spins.

GaugeChart.tsx:255-269 authors the path around a local origin and then translates it by -innerRadius + EXTRA_NEEDLE_LENGTH / 2 inside the rotate(theta, 0, 0) group, so the pivot stays at the gauge origin and the hub ends up on the far side of it, riding the arc band. Both arc commands use sweep flag 0 — the anticlockwise sweep — with radii halfStrokeWidth + 1 and halfStrokeWidth + 3, which is 2 and 4 at the fixed stroke width of 2. Both caps therefore bulge OUTWARD, which is what the captured bbox of [-18, -4, 22, 8] in charts-gaugechart--gauge-chart-basic records for a 16px needle.

Implementation

Path fluentGaugeNeedlePath({
  required double innerRadius,
  required double needleLength,
  required double extraNeedleLength,
  required double strokeWidth,
}) {
  final half = strokeWidth / 2;
  // GaugeChart.tsx:260-261 — halfStrokeWidth + 1.
  final tipRadius = half + 1;
  // GaugeChart.tsx:259,262-263 — halfStrokeWidth + 3.
  final hubRadius = half + 3;
  // GaugeChart.tsx:268.
  final dx = -innerRadius + extraNeedleLength / 2;
  return (Path()
        ..moveTo(0, -hubRadius)
        ..lineTo(-needleLength, -tipRadius)
        ..arcToPoint(
          Offset(-needleLength, tipRadius),
          radius: Radius.circular(tipRadius),
          // Sweep flag 0 in SVG is the anticlockwise sweep, which is
          // `clockwise: false` here.
          clockwise: false,
        )
        ..lineTo(0, hubRadius)
        ..arcToPoint(
          Offset(0, -hubRadius),
          radius: Radius.circular(hubRadius),
          clockwise: false,
        )
        ..close())
      .shift(Offset(dx, 0));
}