Flutter布局问题：使Container背景仅包裹文本且图标居右

问题描述 #

我需要实现带渐变背景的Container仅包裹文本内容的设计。但使用Expanded包裹Container时，它会占据Row所有空白空间，不符合设计要求。改用Flexible后，希望箭头图标能对齐Row末尾，现有代码如下：

Container(
              width: 400,
              height: 300,
              color: Colors.blue,
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Flexible(
                            child: Container(
                                color: Colors.white,
                                child: Text("Công thực tế:21 công"))),
                        Align(
                            alignment: Alignment.topRight,
                            child: Icon(Icons.arrow_circle_right))
                      ],
                    ),
                  )
                ],
              ),
           ),

解决方案 #

要实现需求，只需对代码做两处关键调整：

• 给外层Row设置mainAxisAlignment: MainAxisAlignment.spaceBetween，让子组件分别靠向左右两端
• 保留Flexible以兼容文本超长换行场景（若文本长度固定且较短，可直接移除Flexible）

修改后的代码：

Container(
  width: 400,
  height: 300,
  color: Colors.blue,
  child: Column(
    children: [
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 核心：左右分散对齐
          children: [
            Flexible(
              child: Container(
                // 替换为你的渐变背景
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.white, Colors.grey[200]!],
                  ),
                ),
                child: Text("Công thực tế:21 công"),
              ),
            ),
            Icon(Icons.arrow_circle_right) // 无需额外Align，靠Row对齐规则自动居右
          ],
        ),
      )
    ],
  ),
)

说明 #

1. mainAxisAlignment: MainAxisAlignment.spaceBetween会让Row内的文本容器靠左、箭头靠右，自动填充中间空白，完美实现箭头对齐末尾的效果
2. 保留Flexible是为了处理文本超长的情况：当文本长度超过Row剩余宽度时，会自动换行，Container仍会紧密包裹换行后的文本；若文本长度固定，直接使用Container即可，无需Flexible
3. 移除了多余的Align组件，箭头位置由Row的对齐规则控制，代码更简洁

内容的提问来源于stack exchange，提问作者Viet Nguyen