Flutter 将容器包装在聊天buble的文本周围

我试图创建聊天泡泡，让它们环绕文本，而不扩展到屏幕的另一端。我已经看到了其他线程如何做到这一点，并尝试实现它，但没有一个工作。以下是我看到并尝试实施建议修复的线程：

目前，当我的容器中有背景时，会发生以下情况：

我的代码：

Widget build(BuildContext context) {
return new SizeTransition(
    sizeFactor: new CurvedAnimation(
        parent: animationController.view,
        curve: Curves.easeOut),
    axisAlignment: 0.0, 
    child: new Container(
        decoration: BoxDecoration(
          border: Border.all(
            color: (text[0]=='r') ? lightVioletBlue :mintgreen,
            width: 2.0,
            style: BorderStyle.solid,
          ),
          borderRadius:  BorderRadius.all(Radius.circular(20)),
          color: (text[0] == 'r') ? lightVioletBlue:mintgreen,
        ),
        margin: const EdgeInsets.symmetric(vertical: 10.0),
        child: new Row(           
          mainAxisSize: MainAxisSize.min,            
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.only(right: 16.0),
              child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                  ? new CircleAvatar(child: new Text(_otherName[0]))
                  : null
            ),
            new Expanded(
              child: new Column(
                  crossAxisAlignment: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                      ? CrossAxisAlignment.start
                      : CrossAxisAlignment.end,
                  children: <Widget>[
                    new Text((text[0] == 'r') ? _otherName : _name, //If first letter is an r, then it indicates it's a reply.
                        style: (text[0] == 'r') ? TextStyle(color: Colors.white) : Theme.of(context).textTheme.subhead),
                    new Container(
                      margin: const EdgeInsets.only(top: 5.0),
                      child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                          ? new Text(text.substring(1), style: TextStyle(color: Colors.white))
                          : new Text(text),
                    ),
                  ],
                ),                 
            ),
            new Container(
                margin: const EdgeInsets.only(left: 16.0),
                child: (text[0] == 'r') //If first letter is an r, then it indicates it's a reply.
                    ? null
                    : new CircleAvatar(child: new Text(_name[0]))),
            ],
          ),
        ) //new
    );   

}

---

我已经尝试在父容器上添加约束，但是这需要我创建一个固定的大小，至少我自己对颤振的理解是这样的，并且容器仍然从左侧开始。因此，来自肯的消息将在容器的右侧结束，但是容器在屏幕中间结束。

您可以将整个消息气泡包成一行并设置另一个子的间隔符：

一行 子项：[消息气泡，间隔符] , 将其应用到您的代码中，我们得到如下结果我还优化了其他一些代码：

小部件构建上下文上下文{ bool isReply=text[0]==r； 字符串名称=isReply？\u其他名称：名称； Widget profilePicture=容器 填充：常量边集。对称水平：16， 子项：CircleAvatarchild:Textname[0] ; Widget messageText=列 crossAxisAlignment:isReply？crossAxisAlignment.start:crossAxisAlignment.end， 儿童：[ Textname， 风格：伊斯雷普利 ？TextStylecolor:Colors.white ：Theme.ofcontext.textTheme.subhead , 尺寸箱高度：5， isReply？Texttext.substring1，样式：TextStylecolor:Colors.white ：text文本， ], ; Widget messageBubble=SizeTransition 尺寸因子：曲线化 父级：animationController.view， 曲线：Curves.easeOut , axisAlignment:0， 子：容器 装饰：盒子装饰 边界：边界 颜色：isReply？浅紫罗兰蓝：薄荷绿， 宽度：2， 样式：BorderStyle.solid， , borderRadius:borderRadius.circular20， 颜色：isReply？浅紫罗兰蓝：薄荷绿， , 边距：常数边集。对称垂直：10， 孩子：排 mainAxisSize:mainAxisSize.min， 儿童：isReply ？[profilePicture，messageText] ：[messageText，profilePicture]， , , ; 返回行 儿童：isReply ？[messageBubble，垫片，] ：[Spacer，messageBubble] ; }

---

还请注意，您不应将消息文本用作回复的区分因素。如果消息以小写字母r开头，该怎么办？

简而言之，它应该是RowExpandedText“”，ContainerText'Ken'。i、 在气泡容器前使用扩展的emty文本。你是什么意思？我尝试将Expanded添加到Expanded中的文本部分，并删除了Expanded。尽管这很简单，但一旦我从父容器中删除了约束，一切都会崩溃。不，你的扩展内容在气泡容器中，我是指气泡容器外的扩展空文本。在气泡容器外，你是指我的行小部件吗？再添加一行WidgetHank！是的，我知道我不应该使用短信作为区分因素。在我完全实现这个应用的后端之前，这只是一个临时解决方案。但是谢谢你的帮助，我把它整理好了！