Container 内的 Flutter Text 不会扩展到第二行 [Chat Bubble]答案

【问题标题】：Flutter Text inside Container doesn't expand to second line [Chat Bubble]Container 内的 Flutter Text 不会扩展到第二行 [Chat Bubble]
【发布时间】：2021-11-07 12:45:54
【问题描述】：

我正在尝试制作一个信使应用程序，但找不到解决方案，

问题： 容器小部件不会扩展文本小部件内的长文本

-Container()

   |
    --> Text()

我尝试了什么：

我在容器内尝试了灵活的小部件而不是文本小部件，但这不起作用。 Flex 在 Container 中不起作用。

**错误：**

════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 38 pixels on the right.
The relevant error-causing widget was
Row
lib\views\chatScreen.dart:201
════════════════════════════════════════════════════════════════════════════════

我的代码：

class MessageBubble extends StatelessWidget {
  bool isMine;
  String message;
  MessageBubble(this.isMine, this.message);

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(7),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
            ),
            child: 
              child: Text(
                message,
                textWidthBasis: TextWidthBasis.parent,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 16.0),
              ),
            ), 
        ]);
  }
}

代码尝试灵活：（不起作用）

class MessageBubble extends StatelessWidget {
  bool isMine;
  String message;
  MessageBubble(this.isMine, this.message);

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(7),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
            ),
            child: Flexible(
              child: Text(
                message,
                textWidthBasis: TextWidthBasis.parent,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontSize: 16.0),
              ),
            ),
          ),
        ]);
  }
}

灵活或展开的结果：

我真正想要的是什么？：

ChatBubble 不应等于屏幕大小。喜欢下面的图片。

【问题讨论】：

在 Expanded 或 Flexible 中添加您的 Widget 参考我的回答 here 或 here 希望对您有所帮助
灵活和扩展都给出了这个错误：Incorrect use of ParentDataWidget
你能告诉我在哪里使用扩展或灵活小部件
亲爱的@RavindraS.Patil 我想使用容器（）内部的文本（）。
可以添加更新后的代码吗？

标签： flutter dart flutter-layout

【解决方案1】：

您需要指定容器的最小宽度，然后一切就绪。测试一下：

return Row(
        mainAxisAlignment:
            isMine ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          IntrinsicWidth(
              child: Container(
            constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width / 1.3),
            margin: EdgeInsets.symmetric(vertical: 4, horizontal: 14),
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: BoxDecoration(
              color: isMine ? Colors.blue : Colors.red,
              borderRadius: BorderRadius.only(
                topLeft: isMine ? Radius.circular(20) : Radius.circular(0),
                bottomLeft: isMine ? Radius.circular(20) : Radius.circular(10),
                bottomRight: isMine ? Radius.circular(10) : Radius.circular(20),
                topRight: isMine ? Radius.circular(0) : Radius.circular(20),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                  fontSize: 16),
            ),
          )),
        ]);

【讨论】：

谢谢妈妈，容器的最大宽度做到了

【解决方案2】：

让我为您节省时间，您可以使用 Flutter Chat Bubble，在 pub 上获取它

该库为您提供了文本换行和其他功能

下面是一个示例

【讨论】：

【解决方案3】：

试试下面的答案希望它对你有帮助>

  Expanded(
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 4, horizontal: 14),
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0),
              bottomLeft: Radius.circular(10),
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(20),
            ),
          ),
          child: Text(
              "hfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssahfduasudfufabsydsxfssa"),
        ),
      ),

你的屏幕结果 ->

【讨论】：

您的解决方案占用设备的全屏宽度。我已经编辑了问题，请检查我真正想要的结果的图像。
尝试在 IntrinsicWidth() 小部件中使用参考文档here 并使用容器宽度为 MediaQuery refer here