Flutter Web中CustomClipper与ClipPath裁剪异常行为该如何解决？

你遇到的是Flutter 2.2.x版本Web端CanvasKit渲染器的已知路径运算缺陷：当PathOperation.difference运算中被减去的子路径完全位于父路径内部且不触碰父路径边界时，镂空效果会失效，你测试时只有触碰边界的子路径生效完全符合该bug的表现。

方案1：修改Clipper实现，避开路径组合运算（推荐，无副作用） #

改用奇偶填充规则手动构造镂空路径，不需要调用Path.combine，即可规避该bug，修改后的Clipper代码如下：

class Clipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      // 先添加外层全屏矩形
      ..addRect(Offset.zero & size)
      // 再添加需要挖洞的内部矩形
      ..addRect(Rect.fromLTWH(10, 10, 100, 100))
      // 设置奇偶填充规则，两个路径重叠的区域会被自动镂空
      ..fillType = PathFillType.evenOdd;
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

原有ClipPath的调用代码不需要做任何修改，即可在2.2.3版本的Web端正常生效。

方案2：临时切换Web渲染器 #

如果不想修改业务代码，可以强制Web端使用HTML渲染器绕过该CanvasKit的bug：

• 本地调试运行时执行命令：flutter run -d chrome --web-renderer html
• 打包生产环境时执行命令：flutter build web --web-renderer html
  该方案的缺陷是HTML渲染器的Canvas绘制性能低于CanvasKit，复杂动画场景可能出现卡顿。

方案3：升级Flutter版本 #

该路径运算bug已经在Flutter 3.0及以上版本修复，升级后你原本的代码不需要做任何修改，即可在Web端正常运行。

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