paint method

  1. @override
void paint(
  1. Canvas canvas,
  2. Path path,
  3. Paint basePaint,
  4. double animationValue,
)
override

Paints the animated connection effect on the canvas.

Parameters:

  • canvas: The canvas to draw on
  • path: The connection path (pre-computed and cached)
  • basePaint: The base paint object with color, stroke width, etc.
  • animationValue: The current animation value (0.0 to 1.0, repeating)

Implementations should use animationValue to create continuous animations. The value continuously cycles from 0.0 to 1.0.

Implementation

@override
void paint(Canvas canvas, Path path, Paint basePaint, double animationValue) {
  // Draw the static path first (underneath the particles) with configured opacity
  if (connectionOpacity > 0) {
    final pathPaint = Paint()
      ..color = basePaint.color.withValues(alpha: connectionOpacity)
      ..strokeWidth = basePaint.strokeWidth
      ..style = PaintingStyle.stroke
      ..strokeCap = basePaint.strokeCap
      ..strokeJoin = basePaint.strokeJoin;

    canvas.drawPath(path, pathPaint);
  }

  // Draw particles on top
  final pathMetrics = path.computeMetrics();

  for (final metric in pathMetrics) {
    final pathLength = metric.length;

    // Draw particles evenly distributed along the path
    for (int i = 0; i < particleCount; i++) {
      // Calculate particle position with animation offset
      // For seamless looping: position at t=0 and t=1 must be equivalent (differ by 1.0)
      final particleOffset = i / particleCount;
      final animatedPosition =
          (particleOffset + animationValue * speed) % 1.0;
      final distance = animatedPosition * pathLength;

      // Get the position and tangent at this point on the path
      final tangent = metric.getTangentForOffset(distance);
      if (tangent == null) continue;

      // Draw particle using the custom painter
      particlePainter.paint(canvas, tangent.position, tangent, basePaint);
    }
  }
}