Question 77604 in Flutter Question posted in
The official Flutter documentation can be found here.

how can I make may Image be like this shape? – Flutter

I want to give a shape to an image like below

enter image description here.

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search