CircleAvatar 不显示圆形图像答案

【问题标题】：CircleAvatar not showing circular imageCircleAvatar 不显示圆形图像
【发布时间】：2019-05-25 06:43:18
【问题描述】：

我正在使用 CicleAvatar 显示我的头像，但它没有显示圆形。这是我的代码

  //Circle Image
  Widget circularImage(){
    return new CircleAvatar(
        radius: 45,
        child: CachedNetworkImage(
          imageUrl: this.strImageURL,
          placeholder: new CircularProgressIndicator(),
          errorWidget: new Icon(Icons.error),
        )
    );
  }

【问题讨论】：

您需要使用 backgroundImage:property 以使其适合 Circle。 stackoverflow.com/a/53514007/10269042
@anmol.majhail 你应该让你的评论成为答案，因为这是正确的实际答案

标签： dart flutter

【解决方案1】：

您可以像这样将 cachedNetworkImage 包装在 ClipRRect 小部件中：

Widget circularImage(){
    return CircleAvatar(
        radius: 45,
        child: ClipRRect(
            borderRadius: BorderRadius.circular(45),
            child: CachedNetworkImage(
              imageUrl: this.strImageURL,
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
        ),
    );
  }

【讨论】：

@CodeHunter 很高兴我能提供帮助！接受我的回答将不胜感激！

【解决方案2】：

ClipOval 可以使用，这会创建一个椭圆形的剪辑。如果 [clipper] 为空，椭圆将被刻入布局大小，并且孩子的位置。

ClipOval(
  child: Image.asset(
    "image.png",
    fit: BoxFit.cover,
    width: 50.0,
    height: 50.0,
  )
),

【讨论】：