Flutter开发：如何让Card组件内的图片适配卡片尺寸避免溢出

解决方案 #

图片溢出的核心原因是Image.asset默认没有设置适配规则，且外层无尺寸约束，会按照图片原始分辨率渲染，超出Card可用区域就会触发溢出警告。
修改代码如下：

Card(
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    side: const BorderSide(width: 0.1),
    borderRadius: BorderRadius.circular(24),
  ),
  child: Ink(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [AppColors.secundary, Colors.lime],
      ),
    ),
    child: Column(
      children: <Widget>[
        Expanded(
          child: Image.asset(
            AppImages.audi1,
            fit: BoxFit.cover,
            width: double.infinity,
          ),
        ),
        const ListTile(
          title: Text('Acidente'),
        ),
      ],
    ),
  ),
),

关键改动说明：

• 用Expanded组件包裹Image.asset：自动分配Column中除ListTile外的剩余高度，限制图片的最大高度。
• 新增fit: BoxFit.cover参数：控制图片按比例缩放后填满父容器，超出部分裁剪，是卡片类场景最常用的适配模式；如果需要完整展示图片不裁剪，可替换为BoxFit.contain。
• 新增width: double.infinity参数：让图片宽度占满Card的横向空间，避免两侧留白。

如果你的Card本身已经设置了固定宽高，也可以直接用SizedBox指定图片尺寸：

SizedBox(
  width: 200, // 按实际需求调整数值
  height: 120, // 按实际需求调整数值
  child: Image.asset(
    AppImages.audi1,
    fit: BoxFit.cover,
  ),
)

内容的提问来源于stack exchange，提问作者Roger Araujo