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?

CodePudding user response：

You need to change getClip()

path.lineTo(0, 50);
path.lineTo(0, size.height - 50);
path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height - 50);
path.lineTo(size.width, 50);
path.quadraticBezierTo(size.width / 2, 0, 0, 50);

I hope this is what you wanted, based on the question you wrote.

CodePudding user response：

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;
  }