I want to create below app design using customPainter in flutter

Question

enter image description here I want to create appBar like below but i don't have good knowledge of customPainter. It should be like below design. I have attached the image unable to do this using cubic and beizer curve in flutter.

 void paint(Canvas canvas, Size size) {
 final paint = Paint()
 ..color = Colors.red
 ..style = PaintingStyle.fill
 ..strokeWidth = 4.0;
 final path = Path();
 path.moveTo(0, 0);
 path.lineTo(size.width, 0);
 path.lineTo(size.width, size.height);
 path.lineTo(size.width-30, size.height);
 // path.cubicTo(size.width-10, size.height,
 // size.width-60, size.height+20,
 // size.width-60, size.height-10
 // );
 path.relativeCubicTo(size.width-40,
 100,
 size.width-60, 10,
 size.width-60,0
 );
 path.lineTo(0, size.height);
 canvas.drawPath(path, paint); 

Answer 1

Try the following version of ClipPath.

enter image description here

Here's the clipper:

class AppBarClipper extends CustomClipper<Path>{
 @override
 Path getClip(Size size) {
 
 Path path = Path();
 double w = size.width;
 double h = size.height;
 double amountToClip = w /10;
 path.lineTo(w,0);
 path.lineTo(w,h);
 path.lineTo(w - amountToClip , h );
 path.quadraticBezierTo(w-1.25 * amountToClip, h-.5*amountToClip, w- 1.5 * amountToClip , h -amountToClip / 2);
 path.lineTo(1.5 * amountToClip, h - amountToClip / 2);
 path.quadraticBezierTo(1.25 * amountToClip, h-.5*amountToClip , amountToClip , h);
 path.lineTo(0 , h);
 path.lineTo(0,0);
 return path;
 }
 @override
 bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>true;
}

And here's the widget after applying the clip path:

ClipPath(
 clipper: AppBarClipper(),
 child: Container(
 width: double.infinity,
 height: 80,
 color: Colors.red,
 ),
 ),

For sure, you can tailor that path to justify to your needs.

• Sonu Saini: this is not same as i given the image there should be rounded corner of beizer curve. if is there any solution for this please share
• A-E: @SonuSaini yes , i see. you only need to add more control points (more points on the path) to get the required shape.