Flutter Firestore实时监听正常但UI不更新问题求助

根因分析 #

• Flutter 为声明式UI框架，仅修改状态变量的值不会触发UI重绘，需要调用setState()通知框架刷新界面，你之前的代码修改name、children变量后没有触发刷新，因此UI不会实时更新
• 热重启后显示初始值也是因为首次拿到Firestore返回的数据后未触发UI刷新，热重载会强制触发组件重绘，因此才会显示最新值
• 原代码没有对Firestore实时监听器做取消处理，页面销毁后会出现内存泄漏问题

完整可运行代码 #

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

class UserInfoPage extends StatefulWidget {
  const UserInfoPage({super.key});

  @override
  State<UserInfoPage> createState() => _UserInfoPageState();
}

class _UserInfoPageState extends State<UserInfoPage> {
  String name = 'name here';
  String children = 'children here';
  String docId = '0';
  // 存储监听器实例，用于页面销毁时取消监听
  StreamSubscription<QuerySnapshot>? _userListener;

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

  void _initUserListener() {
    final FirebaseAuth auth = FirebaseAuth.instance;
    final User? user = auth.currentUser;
    // 新增用户登录状态判空，避免空指针异常
    if (user == null) return;
    final uid = user.uid;

    _userListener = FirebaseFirestore.instance
        .collection("userNames")
        .where("uid", isEqualTo: uid)
        .snapshots()
        .listen((result) {
      // 赋值逻辑包裹在setState中，触发UI自动刷新
      setState(() {
        if (result.docs.isNotEmpty) {
          final userDoc = result.docs.first;
          print(userDoc["firstName"]);
          print(userDoc["children"].toString());
          name = userDoc["firstName"];
          children = userDoc["children"].toString();
          docId = userDoc.id;
        }
      });
    });
  }

  @override
  void dispose() {
    // 页面销毁时取消监听器，避免内存泄漏
    _userListener?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("用户信息")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('用户名: $name'),
            Text('Children: $children'),
          ],
        ),
      ),
    );
  }
}

核心修改说明 #

• 新增StreamSubscription类型的监听器存储变量，在页面销毁的dispose生命周期中取消监听，避免内存泄漏
• 变量赋值逻辑包裹在setState()中，触发UI自动刷新，无需手动触发热重载
• 新增用户登录状态判空逻辑，避免用户未登录时出现空指针异常
• 优化查询结果处理逻辑，按uid查询通常只返回一条文档，直接取第一条即可，无需遍历所有文档

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