Flutter 如何使用CustomClipper在颤振中创建相互连接的3个圆弧形状

我正在尝试使用

CustomClipper

在颤振中创建此形状

我在一个原来看起来像这样的矩形上应用了

Clipper

这是我在矩形上应用的

CustomClipper

代码

class CustomSearchCircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var mr = 10.0;
    Path path = Path()
      ..moveTo(0, size.height)
      ..arcToPoint(
        Offset(mr, size.height - mr),
        radius: Radius.circular(mr),
        clockwise: false,
      )
      ..quadraticBezierTo(
        size.width / 2,
        -15,
        size.width - mr,
        size.height - mr,
      )
      ..arcToPoint(
        Offset(size.width, size.height),
        radius: Radius.circular(mr),
        clockwise: false,
      )
      ..lineTo(0, size.height)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

class CustomSearchCircleClipper扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var-mr=10.0；
路径路径=路径（）
..移动到（0，大小。高度）
…弧点(
偏移量（mr、尺寸、高度-mr），
半径：半径。圆形（mr），
顺时针：假，
)
…方贝塞尔托(
尺寸。宽度/2，
-15,
尺寸。宽度-mr，
尺寸.高度-mr，
)
…弧点(
偏移量（尺寸、宽度、尺寸、高度），
半径：半径。圆形（mr），
顺时针：假，
)
..lineTo（0，尺寸。高度）
…关闭（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回true；
}
}

在矩形容器上应用裁剪器后，结果如下

正如两个箭头所指出的那样，问题在于三个圆弧之间没有平滑连接

---

如何才能如第一幅图所示顺利地将它们连接起来？

不是答案，而是使用自定义绘制小部件，而不是剪辑