Question: I want to design a widget of shape of a chat bubble where one corner is pinned and its height should adjust to the lines of the text? For now I'm using ClipRRect widget with some borderRadius. But I want one corner pinned. Any suggestions ? 
[![Chat bubble shape](https://i.stack.imgur.com/sfSuW.png)](https://i.stack.imgur.com/sfSuW.png)

**UPDATE**

I know this can be done using a stack but I'm looking for a better solution since I have to use it many times in a single view and using many stacks might affect the performs. ( correct me here if I'm wrong )

Answer: 
For someone who want this get done with library. You can add `bubble: ^1.1.9+1` (Take latest) package from pub.dev and wrap your message with Bubble.

```
Bubble(
style: right ? styleMe : styleSomebody,
//Your message content child here...
)

```

Here `right` is boolean which tells the bubble is at right or left, Write your logic for that and add the style properties `styleMe` and `styleSomebody` inside your widget as shown below. Change style according to your theme.

```
double pixelRatio = MediaQuery.of(context).devicePixelRatio;
double px = 1 / pixelRatio;

 BubbleStyle styleSomebody = BubbleStyle(
      nip: BubbleNip.leftTop,
      color: Colors.white,
      elevation: 1 * px,
      margin: BubbleEdges.only(top: 8.0, right: 50.0),
      alignment: Alignment.topLeft,
    );

    BubbleStyle styleMe = BubbleStyle(
      nip: BubbleNip.rightTop,
      color: Colors.grey,
      elevation: 1 * px,
      margin: BubbleEdges.only(top: 8.0, left: 50.0),
      alignment: Alignment.topRight,
    );

```
Sorry I am not able to show you the code for it but I can present an idea that might work if you implement it correctly. Suppose the Widget you made with `ClipRect` is called `MyChatBubbleRect`. Now, make another widget that draws a triangle using [CustomPainter](https://api.flutter.dev/flutter/rendering/CustomPainter-class.html), let's call it `MyChatBubbleTriangle`, of course fill it with same color as the chat bubble but you can use a different color initially for debugging. Now that we have two widgets we can stack 'em together on top of each other and using [Positioned](https://api.flutter.dev/flutter/widgets/Positioned-class.html) widget over the `MyChatBubbleTriangle`. Something like this:

```
Stack(
  children : [
     MyChatBubbleRect(), // Maybe decrease the width a bit
     Positioned(
        top: 0,
        right: 0,
        child: MyChatBubbleTriangle()
     )
  ]
)

```

This is just an idea I think you can pursue. Sorry couldn't provide the proper source code.