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,
    );

```
Chat Body

```
DecoratedBox(
    decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8.0),
   ),
   child: Text("your message goes here"),
);

```

Make a custom Triangle

```
class ChatBubbleTriangle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.blue;

    var path = Path();
    path.lineTo(-10, 0);
    path.lineTo(0, 10);
    path.lineTo(10, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

```

Use both of them within a stack wrapping `ChatBubbleTriangle` with `Positioned()` widget as @Shababb Karim pointed in his answer