how to creat such shape as chat bubble

Issue

I am trying to create such shape, and checked some package but none of them has the same shape, especially the radius between the tail and main part, I found this one is similar but with hard cut with the tail https://pub.dev/packages/flutter_chat_bubble, please tell me how to create this radius corner tail connection, thanks!

Solution

If you go into the package you referenced earlier you will find the file below, it lays out how they drew the bubble. If you just copy and edit the file to adjust your bubble to your liking you can easily replicate what you want above. Their package is pretty simple. The perks of being open source.

EdgeInsets setPadding() {
        if (clipper is ChatBubbleClipper1) {
          if ((clipper as ChatBubbleClipper1).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 20);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 10);
          }
        } else if (clipper is ChatBubbleClipper2) {
          if ((clipper as ChatBubbleClipper2).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 25);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 25, right: 10);
          }
        } else if (clipper is ChatBubbleClipper3) {
          if ((clipper as ChatBubbleClipper3).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 20);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 10);
          }
        } else if (clipper is ChatBubbleClipper4) {
          if ((clipper as ChatBubbleClipper4).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 20);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 20, right: 10);
          }
        } else if (clipper is ChatBubbleClipper5) {
          if ((clipper as ChatBubbleClipper5).type == BubbleType.sendBubble) {
            return EdgeInsets.all(10);
          } else {
            return EdgeInsets.all(10);
          }
        } else if (clipper is ChatBubbleClipper6) {
          if ((clipper as ChatBubbleClipper6).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 20, left: 10, right: 20);
          } else {
            return EdgeInsets.only(top: 10, bottom: 20, left: 20, right: 10);
          }
        } else if (clipper is ChatBubbleClipper7) {
          if ((clipper as ChatBubbleClipper7).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 15, right: 15);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 15, right: 15);
          }
        } else if (clipper is ChatBubbleClipper8) {
          if ((clipper as ChatBubbleClipper8).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 15);
          } else {
            return EdgeInsets.only(top: 10, bottom: 10, left: 15, right: 10);
          }
        } else if (clipper is ChatBubbleClipper9) {
          if ((clipper as ChatBubbleClipper9).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 10, bottom: 15, left: 10, right: 15);
          } else {
            return EdgeInsets.only(top: 10, bottom: 15, left: 15, right: 10);
          }
        } else if (clipper is ChatBubbleClipper10) {
          if ((clipper as ChatBubbleClipper10).type == BubbleType.sendBubble) {
            return EdgeInsets.only(top: 15, bottom: 10, left: 10, right: 15);
          } else {
            return EdgeInsets.only(top: 15, bottom: 10, left: 15, right: 10);
          }
        }
    
        return EdgeInsets.all(10);
      }
    }

Answered By – flutterloop

Answer Checked By – Clifford M. (FlutterFixes Volunteer)