Flutter：FAB拍照上传后setState不更新按钮图标问题

你的代码里错误地在setState的回调函数中使用了async。setState要求回调是同步的void Function()，如果传入异步函数，setState会直接执行回调但不会等待异步操作完成，导致imageURL的更新时机和组件重建时机不匹配，界面自然不会立即刷新。而VS Code保存后的热重载会强制组件重新构建，此时imageURL已经被正确赋值，所以图片能正常显示。

把获取下载URL的异步操作移到setState外面，拿到URL后再调用setState更新状态：

floatingActionButton: FloatingActionButton.large(
  heroTag: "add image",
  backgroundColor: const Color(0xFF93C3B9),
  child: (imageURL == ' ')
      ? const Icon(Icons.add_a_photo_outlined)
      : Image.network(imageURL),
  onPressed: () async {
    ImagePicker imagePicker = ImagePicker();
    XFile? file = await imagePicker.pickImage(source: ImageSource.camera);

    if (file == null) return;

    String uniqueFileName = DateTime.now().millisecondsSinceEpoch.toString();

    Reference referenceRoot = FirebaseStorage.instance.ref();
    Reference referenceDirImages = referenceRoot.child('images/$userID');
    Reference referenceImageToUpload = referenceDirImages.child(uniqueFileName);

    try {
      await referenceImageToUpload.putFile(File(file.path));
      // 先异步获取下载URL，再调用setState更新状态
      String url = await referenceImageToUpload.getDownloadURL();
      setState(() {
        imageURL = url;
        print(imageURL);
      });
      // 这里可以继续处理Firestore上传逻辑
    } catch (error) {
      // 建议添加错误打印，方便排查问题
      print('图片上传失败: $error');
    }
  },
),

• 初始化imageURL时，建议用空字符串''而非空格' '，避免判断逻辑出现意外问题
• 给Image.network添加加载和错误状态处理，提升用户体验：

  Image.network(
    imageURL,
    errorBuilder: (context, error, stackTrace) => const Icon(Icons.error_outline),
    loadingBuilder: (context, child, loadingProgress) => loadingProgress == null 
        ? child 
        : const CircularProgressIndicator(color: Colors.white),
  )
  

内容的提问来源于stack exchange，提问作者Ten Digit Grid