Flutter绘制拖尾效果

演示：

代码：

import 'dart:ui';
 
import 'package:flutter/material.dart';
import 'package:kq_flutter_widgets/widgets/chart/ex/extension.dart';
 
class TrailingView extends StatelessWidget {
  const TrailingView({super.key});
 
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (v1, v2) {
      Path path = Path();
      path.moveTo(50, 50);
      path.cubicTo(50, 50, 100, 300, 300, 400);
 
      return CustomPaint(
        size: Size(v2.maxWidth, v2.maxHeight),
        painter: Trailing(path: path, r: 8),
      );
    });
  }
}
 
///拖尾效果
class Trailing extends CustomPainter {
  ///路径
  final Path path;
 
  ///起始值大小半径
  final double r;
 
  Trailing({
    required this.path,
    required this.r,
  });
 
  @override
  void paint(Canvas canvas, Size size) {
    PathMetric? pathMetric1 = path.computeMetric();
    if (pathMetric1 != null) {
      int length1 = pathMetric1.length.toInt();
      for (int i = 0; i < length1.toInt(); i++) {
        Tangent? tangent1 = pathMetric1.getTangentForOffset(i.toDouble());
        double mix = i / length1.toInt();
        if (tangent1 != null) {
          Offset cur = tangent1.position;
          canvas.drawCircle(
              cur,
              r * mix,
              Paint()
                ..color = Colors.redAccent
                ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 8));
        }
      }
    }
  }
 
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

主要思路：

根据路径获取路径上的点，并从路径的起始点到终点绘制从大变小的圆点，且设置画笔为外发光模式，就可以达到一个可以根据路径显示的拖尾效果了。