How can I set the clip at the bottom right using flutter CustomClipper

67 views Asked by At

I'm new with flutter and trying to make a custom chat bubble message. I saw a related thread on how to achieve this but it's only for setting the clip at the bottom left corner.

 @override
  Path getClip(Size size) {
    double factor = 10.0;

    final path = Path()
      ..lineTo(0, size.height)
      ..lineTo(factor, size.height - factor)
      ..lineTo(size.width - factor, size.height - factor)
      ..quadraticBezierTo(size.width, size.height - factor, size.width, size.height - (factor * 2))
      ..lineTo(size.width, factor)
      ..quadraticBezierTo(size.width, 0, size.width - factor, 0)
      ..lineTo(factor, 0)
      ..quadraticBezierTo(0, 0, 0, factor)
      ..close();
    
    return path;
  }

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

This is what I get by using this code to set the clip at the bottom left corner but I do not know how I can set it to the bottom right. This is what I'm trying to achieve

UPDATE:

I have achieved what I wanted with this code:

double factor = 10.0;

final path = Path()
  ..lineTo(0, size.height)
  ..lineTo(0, size.height - factor)
  ..lineTo(size.width - factor, size.height - factor)
  ..quadraticBezierTo(size.width, size.height, size.width, size.height)
  ..lineTo(size.width, factor)
  ..quadraticBezierTo(size.width, 0, size.width, 0)
  ..quadraticBezierTo(0, 0, 0, 0)
  ..close();

return path;
1

There are 1 answers

2
Aesha On

You can try like this for the custom clipper

Path getClip(Size size) {
    double factor = 10.0;

    final path = Path()
      ..lineTo(0, size.height - factor)
      ..lineTo(size.width - factor, size.height - factor)
      ..quadraticBezierTo(size.width, size.height - factor, size.width, size.height - (factor * 2))
      ..lineTo(size.width, factor)
      ..quadraticBezierTo(size.width, 0, size.width - factor, 0)
      ..lineTo(factor, 0)
      ..quadraticBezierTo(0, 0, 0, factor)
      ..close();

    return path;
  }

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