如何避免Future<String> URL的CachedNetworkImage随页面状态重复加载？

我通过以下代码从Firebase Storage获取未知路径的头像URL：

Future<String> getProfilePicUrl(email) async {
  String bucket = 'gnospace-a727c.appspot.com';
  String directory = '$email/profilePic';

  try {
    FirebaseStorage storage = FirebaseStorage.instance;

    Reference directoryRef = storage.ref().child(directory);

    ListResult result = await directoryRef.listAll();

    List<String> downloadUrls = [];
    for (var item in result.items) {
      String downloadUrl = await item.getDownloadURL();
      downloadUrls.add(downloadUrl);
    }

    return downloadUrls[0];
  } catch (e) {
    return 'https://firebasestorage.googleapis.com/v0/b/gnospace-a727c.appspot.com/o/Default%20Profile%20Picture.jpg?alt=media&token=1ee3ce93-64c4-4ad3-960a-ac66de4710d8';
  }
}

这个方法返回存储中文件的URL，但CachedNetworkImage仅接受String类型。我用FutureBuilder解决类型不匹配问题后，图片会在页面状态变更时重复加载，相关代码如下：

Container(
  height: MediaQuery.of(context).size.height * 0.04,
  width: MediaQuery.of(context).size.height * 0.04,
  decoration: const BoxDecoration(shape: BoxShape.circle),
  clipBehavior: Clip.antiAliasWithSaveLayer,
  child: FutureBuilder<String>(
    future: futurepeople,
    builder: (context, snapshot) {
      if (snapshot.connectionState ==
          ConnectionState.waiting) {
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return const Icon(Icons.person, size: 100);
      } else {
        return CachedNetworkImage(
          imageUrl: snapshot.data!,
          fit: BoxFit.cover,
          placeholder: (context, url) =>
          const CircularProgressIndicator(),
          errorWidget: (context, url, error) =>
          const Icon(Icons.person, size: 100),
          height: MediaQuery.of(context).size.height * 0.04,
          width: MediaQuery.of(context).size.height * 0.04,
        );
      }
    },
  ),
),

我的需求是：从Firebase Storage获取动态URL的图片并缓存到本地，仅当图片更新时刷新，而非页面状态变更时重复加载。

1. 解决FutureBuilder重复加载问题 #

页面状态变更时FutureBuilder重复执行Future，核心原因是每次build都会重新创建future实例。把Future的初始化移到initState中，确保只执行一次：

class ProfileAvatar extends StatefulWidget {
  final String email;
  const ProfileAvatar({super.key, required this.email});

  @override
  State<ProfileAvatar> createState() => _ProfileAvatarState();
}

class _ProfileAvatarState extends State<ProfileAvatar> {
  late Future<String> _profilePicUrlFuture;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化Future，仅执行一次
    _profilePicUrlFuture = getProfilePicUrl(widget.email);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.04,
      width: MediaQuery.of(context).size.height * 0.04,
      decoration: const BoxDecoration(shape: BoxShape.circle),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      child: FutureBuilder<String>(
        future: _profilePicUrlFuture, // 使用已初始化的Future
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          } else if (snapshot.hasError) {
            return const Icon(Icons.person, size: 100);
          } else {
            return CachedNetworkImage(
              imageUrl: snapshot.data!,
              fit: BoxFit.cover,
              placeholder: (context, url) => const CircularProgressIndicator(),
              errorWidget: (context, url, error) => const Icon(Icons.person, size: 100),
              height: MediaQuery.of(context).size.height * 0.04,
              width: MediaQuery.of(context).size.height * 0.04,
            );
          }
        },
      ),
    );
  }
}

2. 实现图片更新时自动刷新 #

Firebase Storage的下载URL默认长期有效，文件更新后URL不会变化，CachedNetworkImage会一直使用旧缓存。可通过以下两种方案实现更新刷新：

方案一：利用ETag作为缓存键 #

ETag是文件的唯一标识，文件更新时ETag会变化。修改获取方法返回URL和ETag，用ETag作为缓存键：

// 修改获取方法，返回包含URL和ETag的对象
Future<({String url, String etag})> getProfilePicWithEtag(String email) async {
  String bucket = 'gnospace-a727c.appspot.com';
  String directory = '$email/profilePic';

  try {
    FirebaseStorage storage = FirebaseStorage.instance;
    Reference directoryRef = storage.ref().child(directory);
    ListResult result = await directoryRef.listAll();
    
    if (result.items.isEmpty) throw Exception('No profile pic found');
    
    final item = result.items.first;
    final downloadUrl = await item.getDownloadURL();
    final metadata = await item.getMetadata();
    
    return (url: downloadUrl, etag: metadata.etag ?? 'default-etag');
  } catch (e) {
    return (
      url: 'https://firebasestorage.googleapis.com/v0/b/gnospace-a727c.appspot.com/o/Default%20Profile%20Picture.jpg?alt=media&token=1ee3ce93-64c4-4ad3-960a-ac66de4710d8',
      etag: 'default-etag'
    );
  }
}

在FutureBuilder中使用ETag作为缓存键：

class _ProfileAvatarState extends State<ProfileAvatar> {
  late Future<({String url, String etag})> _profilePicDataFuture;

  @override
  void initState() {
    super.initState();
    _profilePicDataFuture = getProfilePicWithEtag(widget.email);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // ... 容器属性不变
      child: FutureBuilder<({String url, String etag})>(
        future: _profilePicDataFuture,
        builder: (context, snapshot) {
          // ... 等待、错误处理逻辑不变
          return CachedNetworkImage(
            imageUrl: snapshot.data!.url,
            cacheKey: snapshot.data!.etag, // 用ETag作为缓存键，文件更新时自动刷新
            // ... 其他属性不变
          );
        },
      ),
    );
  }
}

方案二：监听文件元数据变化 #

通过监听Firebase Storage文件的元数据变化，实时触发URL更新：

class _ProfileAvatarState extends State<ProfileAvatar> {
  late Future<String> _profilePicUrlFuture;
  StreamSubscription? _metadataSubscription;

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

  void _initProfilePic() {
    String bucket = 'gnospace-a727c.appspot.com';
    String directory = '${widget.email}/profilePic';
    FirebaseStorage storage = FirebaseStorage.instance;
    Reference directoryRef = storage.ref().child(directory);
    
    // 获取初始URL
    _profilePicUrlFuture = _fetchProfilePicUrl(directoryRef);
    
    // 监听目录下文件的元数据变化
    directoryRef.listAll().then((result) {
      if (result.items.isNotEmpty) {
        final picRef = result.items.first;
        _metadataSubscription = picRef.listenMetadata((metadata) {
          // 元数据变化时重新获取URL并更新状态
          setState(() {
            _profilePicUrlFuture = _fetchProfilePicUrl(directoryRef);
          });
        });
      }
    });
  }

  Future<String> _fetchProfilePicUrl(Reference directoryRef) async {
    ListResult result = await directoryRef.listAll();
    if (result.items.isEmpty) {
      return 'https://firebasestorage.googleapis.com/v0/b/gnospace-a727c.appspot.com/o/Default%20Profile%20Picture.jpg?alt=media&token=1ee3ce93-64c4-4ad3-960a-ac66de4710d8';
    }
    return await result.items.first.getDownloadURL();
  }

  @override
  void dispose() {
    _metadataSubscription?.cancel(); // 取消监听，避免内存泄漏
    super.dispose();
  }

  // ... build方法不变
}

3. 额外优化：本地缓存URL #

可以把获取到的URL和ETag缓存到本地（比如用SharedPreferences），下次页面初始化时优先读取本地缓存，再后台验证ETag有效性，减少不必要的网络请求。

内容的提问来源于stack exchange，提问作者Mohamed Medhat