how can I make may Image be like this shape? - flutter

Question

I want to give a shape to an image like below
.
here is my build widget
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Container(
height: 200,
color: Colors.grey,
),
ClipPath(
clipper: NativeClipper(),
child: Container(
width: double.maxFinite,
height: 200,
child: Image.asset('assets/classroom.png',fit: BoxFit.cover,),
),
),
],
),
)
);
}
and this is the native clipper function:
class NativeClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, 0);
path.lineTo(0, size.height - 50);
path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height - 50);
path.lineTo(size.width, 0);
path.lineTo(0, 0);
return path;
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}
but that code only makes the bottom of shape.how can I make top of that image to be like its bottom?
how can I fix that?is it a good way to make it?

Answer 1

Try this :
class NativeClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path()
..cubicTo(0, 0, size.width / 2, 50, size.width, 0)
..lineTo(size.width, size.height - 50)
..cubicTo(size.width, size.height - 50, size.width / 2, size.height +
50, 0, size.height - 50);
return path;
}
#override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

Answer 2

You need to change getClip()
path.lineTo(0, 0);
path.lineTo(0, size.height - 50);
path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height - 50);
path.lineTo(size.width, 0);
path.quadraticBezierTo(size.width / 2, size.height/2, 0, 0);
I hope this is what you wanted, based on the question you wrote.