Search code examples
flutterflutter-clippath

Wavy Curve is not smooth using ClipPath

I have to create a curve that looks like as below:

enter image description here

Here is my code trying to make that curve. But it is making a straight line.

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

Clipper 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;
  }
}

The output of the above code is below:

enter image description here

Solution

  • Thanks to @Andreas. Instead of, path.quadraticBezierTo(), I need to use 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();