How can I fix my problem with clippath flutter?

Question

I want to design this appbar :

and my code in main.dart is :

@override
Widget build(BuildContext context) {
return Column(
  children: [
    ClipPath(
      clipper: WaveClip(),
      child: Container(
          height: 200,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Color(0xFF7CB342), Color(0xFFDCEDC8)],
            ),
          ),
          child: childWidget),
    ),
  ],
);

and the WaveClip is:

class WaveClip extends CustomClipper<Path> {


  @override
  Path getClip(Size size) {
    var path = new Path();
    path.lineTo(0, 0); //start path with this if you are making at bottom
    path.lineTo(0, size.height); //start path with this if you are making at bottom
    var controlpoint = Offset(size.width / 5 , size.height - 100);
    var endpoint = Offset(size.width / 3 , size.height +50);
    path.quadraticBezierTo(
        controlpoint.dx, controlpoint.dy, endpoint.dx, endpoint.dy);
    var controlpoint2 = Offset(size.width /2 , size.height +90 );
    var endpoint2 = Offset(size.width /4 , size.height -50);
    path.quadraticBezierTo(
        controlpoint2.dx, controlpoint2.dy, endpoint2.dx, endpoint2.dy);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

but i cant handle it and my code does not works true, how can I fix it? Should i use path.cubicto to design it?

Answer 1

It's better to use custompainter instead of customclipper, and there is a website that automatically generates custompainter code base on your drawing

https://shapemaker.web.app

And this is the guide to use this auto shape maker:

https://youtu.be/AnKgtKxRLX4

I hope this help u to solve your problem