flutter图片聊天泡泡,如何在Flutter中实现聊天气泡状的小部件

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 ?

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 )

解决方案

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 mesasge 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,

);