Flutter Clip-Path 圆角

Question

i' m stuck with clip-path and i wanna know how can i modify this code:

class ClipPathClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 90);

    var firstControlPoint = Offset(size.width / 4, size.height);

    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);
    var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
    var secondPoint = Offset(size.width, size.height - 90);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

to look like this:

cause in my app the code look like this:

I want that rounded corners.

Answer 1

that because you try to assign control point 1/4 your widht like this:

instead of quadraticBezierTo() 2 times, use cubicTo() 1 times, since its take both of controll point:

class ClipPathClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 90);

    var point = Offset(size.width, size.height - 90);
    var cp1 = Offset(0.0, size.height);
    var cp2 = Offset(size.width, size.height);

    path.cubicTo(cp1.dx, cp1.dy, cp2.dx, cp2.dy, point.dx, point.dy);

    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

result: