Flutter中如何在CircleAvatar内使用带loadingBuilder的NetworkImage

你可以直接把带loadingBuilder的Image.network作为CircleAvatar的child来使用，这样既满足加载状态的需求，又能实现圆形头像效果，代码示例如下：

CircleAvatar(
  radius: 40,
  child: ClipOval(
    child: Image.network(
      '你的网络图片URL',
      fit: BoxFit.cover,
      width: double.infinity,
      height: double.infinity,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return Center(
          child: CircularProgressIndicator(
            value: loadingProgress.expectedTotalBytes != null
                ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                : null,
          ),
        );
      },
      errorBuilder: (context, error, stackTrace) {
        return const Icon(Icons.person, size: 40); // 加载失败时显示默认图标
      },
    ),
  ),
)

说明：

• 用ClipOval包裹Image.network，保证图片显示为圆形，和CircleAvatar的视觉效果一致
• loadingBuilder内可自定义加载中的UI，比如示例里的圆形进度条
• 搭配errorBuilder处理图片加载失败的场景，提升体验

如果坚持想用CircleAvatar的backgroundImage属性，也可以结合FutureBuilder监听图片加载状态，但上面的方法更简洁直观，适合快速上手。

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