Flutter实现图片后方添加文字效果求助：现有代码未达预期

你的代码存在多层冗余Container嵌套的问题，既不利于维护，也没法高效实现图标+文字的水平布局（从示例图的样式来看，应该包含文字和右侧箭头类元素）。以下是优化后的代码，完全贴合你想要的效果：

Container(
  width: double.infinity, // 自动适配父容器宽度，替代固定值提升适配性
  height: 70,
  margin: const EdgeInsets.all(8.0), // 外层间距用margin更合理
  padding: const EdgeInsets.symmetric(horizontal: 16.0), // 控制内部元素与容器边缘的距离
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(58),
    color: const Color.fromARGB(255, 255, 87, 87),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center, // 垂直方向居中对齐
    children: [
      // 左侧图标
      Image.asset(
        'assets/contacts/Facebook.png',
        width: 40,
        height: 40,
      ),
      const SizedBox(width: 16), // 图标与文字的间距
      // 中间文字
      const Text(
        'Facebook',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w500,
        ),
      ),
      const Spacer(), // 自动填充剩余空间，让右侧元素靠最右
      // 右侧箭头（示例图常见元素，可根据需求调整或删除）
      const Icon(Icons.arrow_forward_ios, color: Colors.white, size: 16),
    ],
  ),
)

关键优化点：

• 用Row替代多层嵌套的Align，更适合水平布局场景，结构更清晰
• 用margin和padding替代额外的Container/Padding组件，减少嵌套层级
• 给图标设置固定宽高，避免图标尺寸失控
• 新增Spacer()实现左右元素的分布对齐，符合示例图的典型布局
• 用double.infinity替代固定宽度，提升不同设备的适配性

内容的提问来源于stack exchange，提问作者Suthasin Naktamna