非正方形（如矩形）图片如何实现完整圆形裁剪？

我编写了如下代码：

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(100.0)),
  child: Image.network(
    image_link_from_api,
    width: 100,
    height: 100,
    fit: BoxFit.fill,
  ),
),

我尝试过使用ClipRRect、头像组件、带圆角的Container，但都无法解决问题。如示例图所示，如何让非正方形图片完整填充圆形区域？我已试过fill、cover、contain等所有BoxFit属性。

试试用ClipOval替代ClipRRect，配合BoxFit.cover就能让非正方形图片按比例填充圆形区域，不会拉伸变形：

ClipOval(
  child: Image.network(
    image_link_from_api,
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

或者直接用CircleAvatar，它本身就是为圆形头像设计的，内部会自动处理图片裁剪：

CircleAvatar(
  radius: 50, // 对应直径100，半径设50即可
  backgroundImage: NetworkImage(image_link_from_api),
),

原理说明 #

• ClipRRect是裁剪成圆角矩形，只有当容器宽高相等时才会呈现圆形，但非正方形图片用BoxFit.fill会强制拉伸变形，用BoxFit.cover裁剪后，圆角边缘容易出现不规整的情况。
• ClipOval会直接将子组件裁剪成椭圆，当容器宽高相等时就是正圆形，配合BoxFit.cover会让图片按比例缩放填满圆形区域，仅裁剪超出部分，保证图片比例正常。
• CircleAvatar是Flutter官方封装的组件，内部已经集成了圆形裁剪与图片适配逻辑，使用起来更简洁省心。

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