0

I want to create custom shape with flutter CustomClipper. I Created top and bottom radius but I have problem with this part

class DrawerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final width = size.width;
    final height = size.height;
    // Calculate the radius of the border radii
    final radius = size.width / 8;
    final controlPoint = Offset(radius, height / 2);
    final endPoint = Offset(0, height / 2 + radius);
    
    // Create the path
    final path = Path()

      // create top left and bottom left border radius
      ..lineTo(0, size.height - radius)
      ..quadraticBezierTo(0, size.height, radius, size.height)
      ..lineTo(size.width - radius, size.height)
      ..quadraticBezierTo(
          size.width, size.height, size.width, size.height - radius)
      ..lineTo(size.width, radius)
      ..quadraticBezierTo(size.width, 0, size.width - radius, 0)
      ..lineTo(radius, 0)
      ..quadraticBezierTo(0, 0, 0, radius)
      
      // create center curve
      ..moveTo(0, height / 2)
      ..quadraticBezierTo(
          controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
      ..lineTo(0, height / 2 + radius)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Expected results:

enter image description here

Actual results:

enter image description here

ETA Dev
  • 21
  • 4

0 Answers0