Flutter：如何让Image.asset适配Row中的SizedBox以实现预期UI？

我需要实现Figma设计的信息卡片UI，但当前实现的卡片中，Row内设置的100×100 SizedBox里的Image.asset无法适配容器。DevTools显示SizedBox尺寸符合预期，但图片始终没填满区域。

我尝试过用Expanded包裹图片，结果导致右侧文本Column溢出；也试过用Container的ImageDecoration来设置图片，同样没生效。按照建议移除FittedBox并给Image.asset设置fit: BoxFit.cover后，DevTools显示图片尺寸为100×100，但图片还是没填满紫色的SizedBox区域。

当前代码 #

class InfoCard extends StatelessWidget {
  final String heading;
  final String description;
  const InfoCard({super.key, required this.heading, required this.description});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 157.0,
      padding: const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: ColorConstants.kBackgroundSecondary,
      ),
      child: Row(
        children: [
          SizedBox(
            width: 100.0,
            height: 100.0,
            child: FittedBox(
              child: Image.asset(
                '/images/info_card_icon.png',
              ),
            ),
          ),
          const SizedBox(width: 20.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  heading,
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
                const SizedBox(height: 10.0),
                Text(
                  description,
                  style: Theme.of(context)
                      .textTheme
                      .bodySmall!
                      .copyWith(color: ColorConstants.kText),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

解决方案 #

问题主要出在图片路径错误和多余的FittedBox干扰两个点：

1. Flutter的asset路径不需要开头的斜杠，原路径/images/info_card_icon.png会导致图片无法正确加载（或加载后显示异常）
2. FittedBox会强制图片保持自身宽高比缩放，即使容器尺寸固定，也可能出现无法填满的情况

修改步骤 #

• 移除包裹Image.asset的FittedBox
• 修正图片路径，去掉开头的斜杠，改为images/info_card_icon.png
• 给Image.asset添加fit: BoxFit.cover（保持图片比例并裁剪填满容器），如果需要拉伸填满可以用BoxFit.fill
• 可选：给右侧文本添加溢出处理，防止长文本撑爆Column

修改后的代码 #

class InfoCard extends StatelessWidget {
  final String heading;
  final String description;
  const InfoCard({super.key, required this.heading, required this.description});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 157.0,
      padding: const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: ColorConstants.kBackgroundSecondary,
      ),
      child: Row(
        children: [
          SizedBox(
            width: 100.0,
            height: 100.0,
            child: Image.asset(
              'images/info_card_icon.png', // 修正路径
              fit: BoxFit.cover, // 设置图片适配方式
            ),
          ),
          const SizedBox(width: 20.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  heading,
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
                const SizedBox(height: 10.0),
                Text(
                  description,
                  style: Theme.of(context)
                      .textTheme
                      .bodySmall!
                      .copyWith(color: ColorConstants.kText),
                  overflow: TextOverflow.ellipsis, // 文本溢出时显示省略号
                  maxLines: 3, // 限制最大行数，避免撑爆容器
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

额外检查 #

确保你的pubspec.yaml中已经正确声明了该图片资源：

flutter:
  assets:
    - images/info_card_icon.png

内容的提问来源于stack exchange，提问作者Kostiantyn Selivanov