Create a curve using Flutter: Bezier Curve


I’ve created a custom clipper Bezier curve in flutter however the curve I’ve created is not smooth(No curve).

What I have now is this.

enter image description here


  class MyClipper extends CustomClipper<Path>{
  Path getClip(Size size) {
    var path = new Path();

    path.lineTo(0, size.height) ;
    var firstEndPoint = new Offset(0,size.height);
    var firstControlPoint = new Offset(35,size.height* 7/10);
    path.quadraticBezierTo(firstEndPoint.dx, firstEndPoint.dy, firstControlPoint.dx, firstControlPoint.dy);
    path.lineTo(size.width, size.height* 7/10);
    path.lineTo(size.width, 0);

    return path;

  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;

I want that corner to be a smooth curve and I’ve tried changing values but failed to do so.

What needs to be changed in the code to get the proper result ?


Do you perhaps want this? If not, please attach a picture of what you want to achieve in the question.


Also, I cleaned up your coding style a bit to make it more like dart:

class MyClipper extends CustomClipper<Path> {
  Path getClip(Size size) {
    final firstEndPoint = Offset(10, size.height * 0.7);
    final firstControlPoint = Offset(35, size.height * 0.7);

    return Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(firstEndPoint.dx, firstEndPoint.dy,
          firstControlPoint.dx, firstControlPoint.dy)
      ..lineTo(size.width, size.height * 0.7)
      ..lineTo(size.width, 0)

  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;

Answered By – user1032613

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *