Flutter中如何实现渐变效果沿路径/描边跟随？

一、自定义CustomPainter手动实现 #

Flutter原生Paint类不支持直接沿路径的渐变描边，但可以通过路径分段+颜色插值的方式手动实现，核心思路是把路径拆分成多个细小线段，给每个线段分配渐变过程中对应的颜色，再依次绘制。

具体实现步骤 #

1. 提取路径采样点：通过PathMetrics遍历路径，按固定步长提取路径上的连续点，步长越小渐变越平滑。
2. 生成渐变颜色：用ColorTween根据路径上的位置进度，计算对应插值颜色。
3. 分段绘制线段：用Canvas.drawLine绘制每个小段，对应设置颜色。

示例代码 #

class GradientStrokePainter extends CustomPainter {
  final Path path;
  final Color startColor;
  final Color endColor;
  final double strokeWidth;

  GradientStrokePainter({
    required this.path,
    required this.startColor,
    required this.endColor,
    required this.strokeWidth,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final pathMetrics = path.computeMetrics();
    for (final metric in pathMetrics) {
      final totalLength = metric.length;
      const step = 2.0; // 采样步长，按需调整
      final colorTween = ColorTween(begin: startColor, end: endColor);

      for (var distance = 0.0; distance < totalLength; distance += step) {
        final currentPos = metric.getTangentForOffset(distance)!.position;
        final nextPos = metric.getTangentForOffset(distance + step)?.position ?? currentPos;
        final progress = distance / totalLength;
        final currentColor = colorTween.transform(progress)!;

        final paint = Paint()
          ..color = currentColor
          ..strokeWidth = strokeWidth
          ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke;

        canvas.drawLine(currentPos, nextPos, paint);
      }
    }
  }

  @override
  bool shouldRepaint(covariant GradientStrokePainter oldDelegate) {
    return path != oldDelegate.path ||
        startColor != oldDelegate.startColor ||
        endColor != oldDelegate.endColor ||
        strokeWidth != oldDelegate.strokeWidth;
  }
}

使用时直接嵌套在CustomPaint中：

CustomPaint(
  painter: GradientStrokePainter(
    path: yourDrawingPath, // 你的手绘路径
    startColor: Colors.blue,
    endColor: Colors.red,
    strokeWidth: 10.0,
  ),
)

二、借助第三方库简化开发 #

如果不想手动处理路径采样，可以使用现成的Flutter绘图库，比如path_drawing（辅助路径处理）或flutter_custom_painter_utils，这类库封装了路径分段和颜色插值的逻辑，能减少重复代码量。

注意事项 #

• 采样步长需要平衡性能和效果：步长过小会增加绘制耗时，过大则渐变会出现明显色块。
• 该方法支持曲线（贝塞尔曲线等）路径的渐变描边，PathMetrics能准确提取曲线上的点。
• 复杂路径建议缓存采样后的点序列，避免每次绘制重复计算，提升性能。

内容的提问来源于stack exchange，提问作者Ahmed