Flutter中为何无法用变量指定首页？登录态判断后页面空白

失效原因 #

• 初始渲染空白：build方法是同步执行的，一开始home变量为null，MaterialApp接收null作为home参数时就会显示白屏。而authStateChanges()的回调是异步触发的，等回调执行时，初始的build已经完成，界面已经是空白状态。
• 变量更新不触发重建：回调里修改home变量只是改变了内存中的值，但Flutter不会因为普通变量变化自动重建Widget树，所以就算home被赋值，界面也不会更新。

修复方案：用StreamBuilder监听登录状态 #

直接用StreamBuilder监听authStateChanges()的流，它能自动响应流的变化并重建UI，同时还能处理初始的加载状态：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: NavigationService.navigatorKey,
    debugShowCheckedModeBanner: false, // 关闭调试横幅
    title: 'My App',
    home: StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        // 处理初始加载状态，避免空白
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 根据用户状态返回对应页面
        return snapshot.data == null ? Signup() : const HomePage();
      },
    ),
  );
}

补充说明 #

• authStateChanges()会在应用启动时自动触发一次，获取当前的登录状态，不需要额外处理冷启动的情况。
• 可以把加载状态的CircularProgressIndicator换成自定义的加载页面，提升用户体验。

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