Skip to content

Instantly share code, notes, and snippets.

@huxaiphaer
Created May 23, 2020 23:02
Show Gist options
  • Save huxaiphaer/580801b4be5415ce092ba8a3954abc70 to your computer and use it in GitHub Desktop.
Save huxaiphaer/580801b4be5415ce092ba8a3954abc70 to your computer and use it in GitHub Desktop.
class RightChatBubble extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// TODO: implement getClip
Path path = new Path();
double factor = 10.0;
path.lineTo(0, size.height - factor);
// Curve Left bottom.
path.quadraticBezierTo(
0, size.height,
size.width/16 , size.height );
path.lineTo(factor , size.height + 500);
//Add a nip on the right bottom
// path.lineTo(size.width, size.height);
path.lineTo(size.width, size.height);
// curve right top
path.quadraticBezierTo(size.width, 0, size.width - factor, 0);
path.lineTo(factor, 0);
path.lineTo(size.width, 10);
// curve right top
path.quadraticBezierTo(size.width, 0, size.width - factor, 0);
path.lineTo(factor, 0);
//curve left top
path.quadraticBezierTo(0, 0, 0, 10);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
// TODO: implement shouldReclip
return true;
}
}
@JosteveGit
Copy link

Hey Huxaiphaer, check this

class RightChatBubbleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    var factor = 10.0;
    path.moveTo(0, factor);
    path.lineTo(0, size.height - factor);
    path.quadraticBezierTo(0, size.height, factor, size.height);
    path.lineTo(size.width - factor * 1.8, size.height);
    path.quadraticBezierTo(size.width - factor, size.height,
        size.width - factor, size.height - factor);
    path.lineTo(size.width - factor, factor);
    path.lineTo(size.width, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0, 0, 0, factor);
    return path;
  }

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

@huxaiphaer
Copy link
Author

huxaiphaer commented May 24, 2020

Hey @JosteveGit , thanks for your answer, however, I think I didn't show you how the design looks, it looks like this :

chat bubble right

The nip is at the Right bottom of the chat bubble not the Right Top.

@JosteveGit
Copy link

This

class MyClipper extends CustomClipper<Path>{
  
  @override
  Path getClip(Size size){
    var path = Path();
    double factor = 10.0;
    path.lineTo(0, size.height - (factor * 2));
    path.quadraticBezierTo(0, size.height - factor, factor, size.height - factor);
    path.lineTo(size.width - factor, size.height - factor);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, factor);
    path.quadraticBezierTo(size.width, 0, size.width - factor, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0,0,0, factor);
    return path;
  }
  
  @override
  bool shouldReclip(MyClipper oldDelegate) => false;
}

@huxaiphaer
Copy link
Author

Thanks a bunch @JosteveGit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment