Flutter聊天气泡插入图标与文本：解决气泡过宽问题

问题核心是默认的Row/Column组件会尽可能占据父容器的最大宽度，导致气泡被过度拉伸。只需调整布局组件的尺寸约束，即可让气泡适配文本长度：

修改后的代码 #

Bubble(
  margin: BubbleEdges.only(top: 10),
  alignment: Alignment.topRight,
  nip: BubbleNip.rightTop,
  color: Color.fromRGBO(225, 255, 199, 1.0),
  child: Row(
    // 让Row仅占用内容所需宽度，而非撑满父容器
    mainAxisSize: MainAxisSize.min,
    // 让图标与文本垂直居中对齐
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text(
        "Bang kuy, adu bola sama rt beside",
        // 确保长文本自动换行
        softWrap: true,
      ),
      SizedBox(width: 4), // 可选：给文本和图标添加间距，优化视觉
      Icon(Icons.done_all),
    ],
  ),
)

关键修改说明 #

1. 移除多余的Column组件：原代码中Column仅包裹一个Row，属于冗余嵌套，直接移除可简化布局层级。
2. 设置Row的mainAxisSize: MainAxisSize.min：这是解决气泡过宽的核心——让Row不再默认撑满父容器宽度，仅占用文本+图标的实际宽度，气泡会自动适配这个宽度。
3. 添加垂直对齐与间距：通过crossAxisAlignment让图标和文本居中对齐，配合SizedBox增加间距，提升视觉体验。
4. 确保文本自动换行：softWrap: true（默认启用，可明确声明）保证长文本超出宽度时自动换行，避免内容溢出或气泡异常拉伸。

内容的提问来源于stack exchange，提问作者daffa rahman