Flutter : How to get a straight line using CustomClippers

Question

I wanted to create the curved container like widget in the picture below

I used the Custom clipper class and created a similar one which is shown below

Below is the WaveClipper class I used to create the curved widget

class WaveClipper extends CustomClipper<Path> {
 @override
 getClip(Size size) {
   var path = new Path();
   path.lineTo(0, size.height / 5.25);
   var firstControlPoint =  Offset(size.width / 120, size.height / 2);
   var firstEndPoint =  Offset(size.width / 1.5, size.height / 2.5 );
   var thirdControlPoint =  Offset(size.width/1.025, size.height / 2.8 );
   var thirdEndPoint =  Offset(size.width, size.height / 1.8 );


   path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, 
firstEndPoint.dy);
  path.quadraticBezierTo(thirdControlPoint.dx, thirdControlPoint.dy, thirdEndPoint.dx, 
thirdEndPoint.dy);


path.lineTo(size.width, size.height/3 );
path.lineTo(size.width, 0);
path.close();
return path;
 }

 @override
 bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
  return true;
}
}

Please help me to achieve the desired output !!!

Answer 1

By wrapping the ClipPath widget with the container you can create your design see below code.

Container(
          decoration: BoxDecoration(
              border: Border.all(width: 2, color: Colors.blue),
              color: Colors.blue),
          child: ClipPath(
              child: Container(
                height: 200,
                width: 200,
                color: Colors.white,
              ),
              clipper: WaveClipper()),
        ),