Firebase StreamBuilder<User?>状态闪烁问题及优化方案咨询

问题场景 #

使用userChanges()流检测用户会话时，连接状态频繁在waiting和active之间切换，日志输出如下：

flutter: stream: ConnectionState.waiting
flutter: stream: ConnectionState.active
flutter: stream: ConnectionState.waiting
flutter: stream: ConnectionState.waiting
flutter: stream: ConnectionState.active

这导致loadingWidget反复创建销毁，出现卡顿闪烁。用延迟防抖需要设置1秒才有效，效率太低。

原代码：

StreamBuilder<User?>(
  stream: FirebaseAuth.instance.userChanges(),
  builder: (context, snapshot){
    print('stream: ${snapshot.connectionState}');

    Widget widget = loadingWidget;

    if (snapshot.connectionState == ConnectionState.waiting){
      widget = loadingWidget;
    }else if (snapshot.connectionState == ConnectionState.active){
      if (snapshot.hasData){
        widget = GamePage();
      }else{
        widget = HomeScreen();
      }       
    }
    return widget;

  },
),

最优解决方案 #

1. 优先判断数据状态，弱化ConnectionState的影响 #

userChanges()的临时waiting状态通常不会改变已有用户数据，优先判断hasData/hasError，只在初始加载且无数据时显示loading：

StreamBuilder<User?>(
  stream: FirebaseAuth.instance.userChanges(),
  builder: (context, snapshot) {
    // 已有用户数据，直接返回游戏页
    if (snapshot.hasData) {
      return GamePage();
    }
    // 处理错误情况
    if (snapshot.hasError) {
      return const Center(child: Text('登录出错'));
    }
    // 仅初始加载无数据时显示loading
    if (snapshot.connectionState == ConnectionState.waiting && !snapshot.hasData) {
      return loadingWidget;
    }
    // 无用户数据且非加载状态，返回首页
    return HomeScreen();
  },
)

2. 用distinct()过滤重复的用户状态 #

如果流频繁发送相同的用户实例，用distinct()过滤掉重复事件，减少builder的无效调用：

StreamBuilder<User?>(
  stream: FirebaseAuth.instance.userChanges().distinct((prev, curr) {
    // 通过uid判断用户是否相同，避免无意义的更新
    return prev?.uid == curr?.uid;
  }),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return GamePage();
    }
    if (snapshot.connectionState == ConnectionState.waiting && !snapshot.hasData) {
      return loadingWidget;
    }
    return HomeScreen();
  },
)

3. 手动缓存用户状态，脱离StreamBuilder的频繁重建 #

把用户状态缓存到StatefulWidget的状态中，仅当用户真正变化时才更新UI，彻底避开ConnectionState的波动：

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

  @override
  State<AuthWrapper> createState() => _AuthWrapperState();
}

class _AuthWrapperState extends State<AuthWrapper> {
  User? _currentUser;
  bool _isInitialLoading = true;

  @override
  void initState() {
    super.initState();
    // 初始获取当前用户
    _currentUser = FirebaseAuth.instance.currentUser;
    // 监听用户变化，仅当用户uid改变时更新状态
    FirebaseAuth.instance.userChanges().listen((user) {
      if (_currentUser?.uid != user?.uid) {
        setState(() {
          _currentUser = user;
          _isInitialLoading = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isInitialLoading) {
      return loadingWidget;
    }
    return _currentUser != null ? GamePage() : HomeScreen();
  }
}

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