如何为Flutter中SVG转换的CustomPainter路径添加点击变色的GestureDetector？

问题出在默认的GestureDetector会响应其所在容器的全部区域，而非仅CustomPainter绘制的路径范围。要实现仅点击路径触发颜色变化，需要结合路径命中检测来处理点击事件，具体步骤如下：

1. 给CustomPainter类暴露路径实例 #

flutterShapeMaker生成的CustomPainter类里，paint方法中会定义绘制用的Path对象，我们需要把这个Path保存为类的成员变量并暴露出来，方便后续检测点击位置：

class PathUno extends CustomPainter {
  final Color color;
  late final Path _path;

  PathUno({required this.color}) {
    // 这里替换为flutterShapeMaker生成的路径初始化代码
    _path = Path()
      ..moveTo(10, 10)
      ..lineTo(100, 10)
      ..lineTo(100, 100)
      ..close();
  }

  // 对外暴露路径
  Path get path => _path;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    canvas.drawPath(_path, paint);
  }

  @override
  bool shouldRepaint(covariant PathUno oldDelegate) {
    return oldDelegate.color != color;
  }
}

2. 在GestureDetector中做路径命中判断 #

使用onTapDown回调获取点击坐标，将坐标转换为CustomPainter的本地坐标后，调用Path的contains方法判断点击点是否在路径范围内，只有命中时才触发颜色变化：

class PathTapWidget extends StatefulWidget {
  const PathTapWidget({super.key});

  @override
  State<PathTapWidget> createState() => _PathTapWidgetState();
}

class _PathTapWidgetState extends State<PathTapWidget> {
  Color _pathColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    final pathPainter = PathUno(color: _pathColor);

    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        // 获取点击位置相对于CustomPaint的本地坐标
        final localPos = details.localPosition;
        // 判断点击点是否在路径内
        if (pathPainter.path.contains(localPos)) {
          setState(() {
            _pathColor = _pathColor == Colors.blue ? Colors.red : Colors.blue;
          });
        }
      },
      child: CustomPaint(
        painter: pathPainter,
        // 设置与路径匹配的尺寸，避免无效区域过大
        size: const Size(110, 110),
      ),
    );
  }
}

3. 额外注意点 #

• 确保CustomPaint的size与路径实际尺寸匹配，否则坐标计算会出现偏差
• 如果路径有缩放、平移等变换操作，需要先对点击坐标应用相同的变换，再执行contains检测
• 20个路径类可以封装成通用组件，通过传入不同的CustomPainter子类来复用逻辑

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