如何在上传图片至Firebase Storage后即时更新NetworkImage组件？

1. 依赖Future.delayed等待上传完成完全不可靠，上传时长受网络波动影响，固定延迟要么过早要么过晚。
2. uploadImage是异步方法但返回void，调用时未加await，导致代码会提前执行后续逻辑，此时上传可能还未完成，getDownloadURL拿不到正确链接。
3. 用实例变量存储下载链接，状态管理混乱，容易出现旧值残留或更新不及时的问题。

1. 重构FirebaseStorageStorage类 #

直接让上传方法返回下载链接，移除冗余的实例变量和get方法：

class FirebaseStorageStorage {
  final Reference referenceRoot = FirebaseStorage.instance.ref();

  Future<String> uploadImage({
    required String imageName,
    required String filePath,
  }) async {
    final imagesRef = referenceRoot.child("images");
    final imageToUpload = imagesRef.child(imageName);
    
    final uploadTask = imageToUpload.putFile(File(filePath));
    await uploadTask.whenComplete(() {});
    
    // 上传完成后直接返回下载链接
    return await imageToUpload.getDownloadURL();
  }
}

2. 修改IconButton点击逻辑 #

等待上传完成后再更新UI，完全移除延迟逻辑：

IconButton(
  onPressed: () async {
    final XFile? image = await _imagePicker.pickImage(source: ImageSource.camera);
    if (image != null) {
      // 等待上传完成，直接获取下载链接
      final downloadUrl = await _firebaseStorageStorage.uploadImage(
        imageName: '${image.name}${user!.id}',
        filePath: image.path,
      );
      // 拿到链接后立即更新状态
      setState(() {
        _imageURLController = downloadUrl;
      });
    }
  },
  icon: const Icon(Icons.add_a_photo_sharp),
)

3. 优化CircleAvatar展示逻辑 #

简化嵌套结构，利用foregroundImage特性实现更简洁的UI：

CircleAvatar(
  radius: 60,
  foregroundImage: _imageURLController.isNotEmpty 
      ? NetworkImage(_imageURLController) 
      : null,
  child: _imageURLController.isEmpty
      ? const Icon(
          size: 100,
          Icons.person,
          color: Color(0xffc5daf2),
        )
      : null, // 有图片时无需显示默认图标
)

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