自定义 Clipper Bezier 曲线 Flutter

Question

I am currently unable to draw a bezier curve.

The output I have right now is :

The output that I need is :

What should I add here as bezier values to get the curve? The code snippet of the custom clipper is:

    class OnBoardingClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, size.height * 0.18);
    path.lineTo(0.0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);
    return path;
  }

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

PS Thanks for reading and apologies in case of bad formatting. :-)

Answer 1

You can add a quadraticBezier with values of eg, (3 / 4 * size.width, size.height * 0.18) , (size.width, size.height * 0.05) .

Code:

@override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, size.height * 0.18);
    path.quadraticBezierTo(
        3 / 4 * size.width, size.height * 0.18, size.width, size.height * 0.05);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    return path;
  }

Result: