绘制自定义形状 Flutter

Question

I'm trying to draw the shape in this image The shape that I want to draw Put I can't get the same result by my code:

CustomShapeClipper extends CustomClipper<Path> {
@override

Path getClip(Size size) {

final Path path = Path()

..moveTo(0, size.height * 0.6)

..quadraticBezierTo(

size.width * 0.7 , size.height - (size.height * 0.1) ,

size.width, size.height * 0.8

)

..lineTo(size.width, 0)

..lineTo(0, 0)

..close();


return path;

}


@override

bool shouldReclip(CustomClipper oldClipper) => true;


}

I get this result My Result

Kindly guide me for this.

Thanks in advance

Answer 1

Try this and let me know if it works for you.

In your widget body you can have a build method looking similar to this

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ClipPath(
            clipper: BottomEndClipper(),
            child: Container(
              height: MediaQuery.of(context).size.height * .5,
              decoration: BoxDecoration(
               //Your gradient or own color 
                color: Colors.purple,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

And your custom clipper looking like this

class BottomEndClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 80);
    path.lineTo(size.width * .7, size.height - 10);
    path.quadraticBezierTo(
        size.width * .8, size.height, size.width * .95, size.height * .90);

    path.lineTo(size.width, size.height*.87);
    path.lineTo(size.width, 0);


    path.close();
    return path;
  }
  //Should return false if you don't wish to redraw every time
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Answer 2

I managed to draw something similar using cubicTo instead of quadraticBezierTo . A simple example for what you need:

final Path path = Path()
      ..moveTo(0, size.height * 0.6)
      ..lineTo(size.width * 0.7 - (size.width * 0.05),
          size.height - 2 * (size.height * 0.1))
      ..cubicTo(
          size.width * 0.7 - (size.width * 0.01),
          size.height - 1.88 * (size.height * 0.1),
          size.width * 0.7 + (size.width * 0.01),
          size.height - 1.88 *  (size.height * 0.1),
          size.width * 0.7 + (size.width * 0.05),
          size.height - 2 * (size.height * 0.1))
      ..lineTo(size.width, size.height * 0.7)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

I know that there are a lot of numbers, but you can extract some points as separate variables for a better readability. Practically instead of drawing a Quadric Bezier, we draw 2 lines and the curve between them.

Also you can add clipBehavior: Clip.antiAliasWithSaveLayer to your ClipPath for a smooth drawing