How can I fix my problem with clippath flutter? - 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