使用 ClipPath 的波浪曲线不平滑

Question

我必须创建一条如下所示的曲线：

这是我试图制作该曲线的代码。但它正在做一条直线。

ClipPath(
  clipper: ArrowClipper(),
  child: Container(
    width: 35,
    height: 110,
    color: Color(0xFF3F3C5F),
    child: isOpenedAsync.data
           ? Icon(Icons.chevron_right)
           : Icon(Icons.chevron_left),
    ),
),

快船Class


class ArrowClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Paint paint = Paint();
    paint.color = Variables.backgroundColor;
    Path path = Path();
    final w = size.width; // 35
    final h = size.height; // 110

    path.moveTo(w, 0);
    path.quadraticBezierTo(w, 2, w - 2, 2);
    path.quadraticBezierTo(1, (h/2) - 2, 0, h/2);
    path.quadraticBezierTo(0, h, 2, (h/2) + 2);
    path.quadraticBezierTo(w-2, h - 2, w, h);
    path.close();

    return path;
  }

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

以上代码的输出如下：

Answer 1

感谢@Andreas。而不是 path.quadraticBezierTo()，我需要使用 path.cubicTo()。

    path.moveTo(w, 0);
    path.cubicTo(
        w, h * 0.35,
        w * 0.025, h * 0.4,
        0, h * 0.5);
    path.cubicTo(
        w * 0.025, h * 0.7,
        w, h * 0.6,
        w, h);
    path.close();

使用 ClipPath 的波浪曲线不平滑

Wavy Curve is not smooth using ClipPath

flutter

flutter-clippath