flutter : how to flip this path clip Bezier

523 Views Asked by At

I have this shape enter image description here

I want to flip it to be like this

enter image description here

this is the original code

class CustomMenuClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;

    final width = size.width;
    final height = size.height;

    Path path = Path();
    path.moveTo(0, 0);
    path.quadraticBezierTo(0, 8, 10, 16);
    path.quadraticBezierTo(width - 1, height / 2 - 20, width, height / 2);
    path.quadraticBezierTo(width + 1, height / 2 + 20, 10, height - 16);
    path.quadraticBezierTo(0, height - 8, 0, height);
    path.close();
    return path;
  }

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

this is the github repository I don't mind if it comes to a half-circle.

1

There are 1 best solutions below

1
On

I think is should be something like this:

     Path getClip(Size size) {
        Paint paint = Paint();
        paint.color = Colors.white;
    
        final width = size.width;
        final height = size.height;
    
        Path path = Path();
        path.moveTo(width, 0);
        path.quadraticBezierTo(16, 10, 8, 0);
        path.quadraticBezierTo(height / 2,  width, height / 2 - 20 ,width - 1);
        path.quadraticBezierTo( height - 16, 10, height / 2 + 20, height - 16width + 1);
        path.quadraticBezierTo(height, 0, height - 8, 0);
        path.close();
        return path;
      }

I would not recommend this, since different devices might reproduce different behaviors. Maybe using size.width and size.height might be a better idea for responsiveness.