Flutter中如何让FadeInImage适配Container容器

将图片作为Container子组件时，图片超出了容器范围，需要让图片填充整个80x80的Container（带边框和圆角）。原本使用DecorationImage可以通过BoxFit.cover实现，但现在改用FadeInImage.assetNetwork组件展示图片，代码如下：

Container(
        height: 80,
        width: 80,
        decoration: BoxDecoration(
          border: Border.all(color: AppTheme.primaryColor),
          borderRadius: BorderRadius.circular(15.0),
          // image: DecorationImage(image: NetworkImage(image), fit: BoxFit.cover)
        ),
        child: FadeInImage.assetNetwork(
          placeholder: 'assets/images/loading.gif',
          image: imageFromApi,
        ),
      ),

如何让该图片/子组件填充Container容器？

给FadeInImage设置适配属性，同时处理圆角裁剪问题，修改后的代码如下：

Container(
  height: 80,
  width: 80,
  decoration: BoxDecoration(
    border: Border.all(color: AppTheme.primaryColor),
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(15.0),
    child: FadeInImage.assetNetwork(
      fit: BoxFit.cover,
      placeholder: 'assets/images/loading.gif',
      image: imageFromApi,
    ),
  ),
),

核心说明： #

• fit: BoxFit.cover：让图片按比例缩放，完全填充父容器的尺寸，超出部分自动裁剪。
• ClipRRect包裹：Container的圆角仅属于自身装饰，子组件不会自动适配圆角，通过ClipRRect可以把图片裁剪成对应圆角，避免图片超出圆角区域。

也可以用更简洁的写法，直接给FadeInImage设置裁剪属性：

Container(
  height: 80,
  width: 80,
  decoration: BoxDecoration(
    border: Border.all(color: AppTheme.primaryColor),
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: FadeInImage.assetNetwork(
    fit: BoxFit.cover,
    clipBehavior: Clip.hardEdge,
    placeholder: 'assets/images/loading.gif',
    image: imageFromApi,
    borderRadius: BorderRadius.circular(15.0),
  ),
),

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