Flutter中AssetImage圆角显示异常，如何实现自然圆形边框？

我使用ClipRRect包裹AssetImage，并通过borderRadius.circular设置圆形边框，但图片未呈现预期的圆形效果。左图为当前异常效果，右图为期望效果。现有代码如下：

Flexible(
  child: ListView(
    shrinkWrap: true,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.circular(233),
        child: Image(
          image: AssetImage('assets/library.jpg'),
          height: 190,
        ),
      ),
    ],
  ))

问题原因 #

你只给图片设置了高度，宽度会自适应原图的宽高比，导致图片不是正方形，ClipRRect裁剪后自然是椭圆而非正圆。

修改方案（基于现有代码调整） #

给Image添加与高度一致的宽度，并设置fit: BoxFit.cover保证图片按比例填充，避免拉伸变形：

Flexible(
  child: ListView(
    shrinkWrap: true,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.circular(233),
        child: Image(
          image: AssetImage('assets/library.jpg'),
          height: 190,
          width: 190, // 与高度一致，确保正方形
          fit: BoxFit.cover, // 保持图片比例填充容器
        ),
      ),
    ],
  ))

更简洁的替代方案 #

使用Flutter自带的CircleAvatar组件，专门用于实现圆形头像/图片，代码更简洁：

Flexible(
  child: ListView(
    shrinkWrap: true,
    children: [
      CircleAvatar(
        radius: 95, // 半径为高度的一半（190/2）
        backgroundImage: AssetImage('assets/library.jpg'),
      ),
    ],
  ))

内容的提问来源于stack exchange，提问作者Tae Hyung Kim