Flutter+Firebase点击按钮后无法实时显示更新值求助

核心问题点 #

1. 充值金额获取时机错误：你把s的初始化放在类成员位置，此时输入框还未输入内容，会直接触发解析异常，且点击充值时无法读取最新输入值。
2. Firebase更新后未同步本地状态：调用update修改余额后，没有更新本地balance变量，也未触发UI刷新，导致界面显示旧数据。
3. FutureBuilder使用无效：你用了FutureBuilder但完全没用到它获取的实时快照数据，依然显示本地旧的balance，且每次build都会重复发起Firestore请求，效率低下。
4. 缺少输入合法性校验：未判断输入是否为空或非数字，容易引发运行时异常。

修复步骤及代码修改 #

1. 修正充值金额获取逻辑

删掉类成员中的late int s = int.parse(_reloadEditingController.text);，在reload函数内实时读取并验证输入值：

void reload() async {
  // 校验输入是否为空
  if (_reloadEditingController.text.trim().isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入充值金额'))
    );
    return;
  }

  // 校验输入是否为有效数字
  int rechargeAmount;
  try {
    rechargeAmount = int.parse(_reloadEditingController.text.trim());
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入有效数字'))
    );
    return;
  }

  // 更新Firestore余额
  await FirebaseFirestore.instance
      .collection("users")
      .doc(widget.userID)
      .update({"balance": balance + rechargeAmount});
  
  // 同步更新本地状态并清空输入框
  setState(() {
    balance += rechargeAmount;
    _reloadEditingController.clear();
  });
}

2. 改用StreamBuilder实现实时监听

替换原来的FutureBuilder，用StreamBuilder自动监听Firestore文档变化，无需手动触发刷新：

Row(
  children: [
    const Text('RM'),
    Container(
      child: StreamBuilder<DocumentSnapshot>(
        // 监听文档实时变化流
        stream: FirebaseFirestore.instance
            .collection('users')
            .doc(widget.userID)
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 处理文档不存在的情况
          if (!snapshot.hasData || !snapshot.data!.exists) {
            return const Text('0');
          }

          // 从快照获取最新余额并同步到本地变量
          int latestBalance = snapshot.data!.get('balance') ?? 0;
          if (balance != latestBalance) {
            setState(() {
              balance = latestBalance;
            });
          }
          return Text(latestBalance.toString());
        },
      ),
    ),
  ],
)

3. 完善用户数据获取逻辑

在getUserData中添加空值判断，避免空指针异常：

void getUserData() async {
  try {
    setState(() {
      _isLoading = true;
    });
    final DocumentSnapshot userDoc = await FirebaseFirestore.instance
        .collection('users')
        .doc(widget.userID)
        .get();

    if (!userDoc.exists) {
      return;
    } else {
      setState(() {
        name = userDoc.get('name') ?? '未知用户';
        email = userDoc.get('email') ?? '';
        phoneNumber = userDoc.get('phoneNumber') ?? '';
        imageUrl = userDoc.get('userImage') ?? '';
        location = userDoc.get('location') ?? '';
        balance = userDoc.get('balance') ?? 0;
      });
      final FirebaseAuth _auth = FirebaseAuth.instance;
      User? user = _auth.currentUser;
      if (user != null) {
        setState(() {
          _isSameUser = user.uid == widget.userID;
        });
      }
    }
  } catch (error) {
    print('获取用户数据失败: $error'); // 打印错误便于调试
  } finally {
    setState(() {
      _isLoading = false;
    });
  }
}

4. 优化返回按钮逻辑（可选）

原返回按钮重复获取当前用户，可简化为直接返回上一页：

leading: IconButton(
  onPressed: () {
    Navigator.pop(context);
  },
  icon: const Icon(Icons.arrow_back, size: 40, color: Colors.white)),

最终效果 #

修改完成后，点击充值按钮会：

• 自动校验输入合法性，避免异常
• 更新Firestore余额后实时同步本地状态，刷新UI
• 自动监听Firestore文档变化，其他端修改余额也能实时同步显示

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