Flutter聊天消息气泡实现：时间戳同行加详情且不撑宽气泡的方法

解决方案 #

核心问题是Expanded组件会强制填充父容器的最大可用宽度，导致气泡被拉满；而移除Expanded后底部行宽度仅等于两个文本的总宽度，无法实现左右对齐效果，可通过以下方法修改：

修改步骤 #

1. 给气泡内部承载内容的Column外层包裹IntrinsicWidth组件，强制整个内容区域的宽度匹配内部最宽的子元素（即消息文本的宽度），不会无限拉伸
2. 底部信息行直接使用MainAxisAlignment.spaceBetween实现左右两端对齐，不需要加Expanded组件

完整修改后的代码片段 #

Flexible(
  child: Container(
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: colorChat,
      borderRadius: border(),
    ),
    // 新增IntrinsicWidth包裹Column
    child: IntrinsicWidth(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch, // 让Column子元素占满横向空间
        children: [
          //MESSAGE STR CONTENT
          Text(
            messageStr,
            textAlign: TextAlign.justify,
            style: TextStyle(fontSize: 16),
          ),
          //TIMESTAMP + 详情行
          Padding(
            padding: const EdgeInsets.only(top: 5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween, // 直接左右两端对齐
              children: [
                Text(
                  "some detail",
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
                Text(
                  dateTimeStr,
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
)

实现原理 #

IntrinsicWidth会让子组件的宽度收缩到自身内容需要的最小宽度，刚好和上层消息文本的宽度保持一致，此时底部Row的宽度自动和上层消息宽度匹配，用spaceBetween属性就能直接把详情文本和时间戳分到左右两端，不会出现气泡被撑宽的问题。

内容的提问来源于stack exchange，提问作者Retrato do Papai