Flutter中如何在CircleAvatar内显示加载指示器直至图片加载完成？

原生实现（无需第三方插件） #

利用Image.network的loadingBuilder回调，结合异步读取SharedPreferences的逻辑，直接在CircleAvatar内部处理加载状态：

1. 先在State类中异步获取头像URL：

String? _avatarUrl;

@override
void initState() {
  super.initState();
  _fetchAvatarUrl();
}

Future<void> _fetchAvatarUrl() async {
  final prefs = await SharedPreferences.getInstance();
  setState(() {
    _avatarUrl = prefs.getString('avatar_url');
  });
}

2. 构建带加载状态的CircleAvatar：

CircleAvatar(
  radius: 30,
  child: _avatarUrl != null
      ? ClipOval(
          child: Image.network(
            _avatarUrl!,
            fit: BoxFit.cover,
            width: 60,
            height: 60,
            // 加载中显示进度指示器
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return const Center(
                child: CircularProgressIndicator(strokeWidth: 2),
              );
            },
            // 加载失败显示默认图标
            errorBuilder: (context, error, stackTrace) {
              return const Icon(Icons.person, size: 30);
            },
          ),
        )
      // 未读取到URL时显示进度条
      : const Center(child: CircularProgressIndicator(strokeWidth: 2)),
)

使用第三方插件（CachedNetworkImage） #

如果需要图片缓存、更简洁的状态处理，推荐用cached_network_image插件，它自带加载、错误、缓存逻辑：

1. 先在pubspec.yaml添加依赖：

dependencies:
  cached_network_image: ^3.2.3 # 请使用最新版本

2. 实现代码：

import 'package:cached_network_image/cached_network_image.dart';

// ...

CircleAvatar(
  radius: 30,
  child: _avatarUrl != null
      ? ClipOval(
          child: CachedNetworkImage(
            imageUrl: _avatarUrl!,
            fit: BoxFit.cover,
            width: 60,
            height: 60,
            // 加载中占位组件
            placeholder: (context, url) => const Center(
              child: CircularProgressIndicator(strokeWidth: 2),
            ),
            // 加载失败占位组件
            errorWidget: (context, url, error) => const Icon(Icons.person, size: 30),
          ),
        )
      : const Center(child: CircularProgressIndicator(strokeWidth: 2)),
)

额外注意点 #

• 异步读取SharedPreferences时，初始状态下_avatarUrl为null，需显示进度条或默认占位符；
• 若需要显示加载进度百分比，可在loadingBuilder中通过loadingProgress?.cumulativeBytesLoaded和loadingProgress?.expectedTotalBytes计算；
• 生产环境建议添加错误处理逻辑，避免因URL无效导致的界面异常。

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