right_chat_bubble

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;
  }
}

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

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

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;
}

Thanks a bunch @JosteveGit