Flutter Web部署后刷新灰屏，调试报空值错误求解决

问题现象 #

已排查过Web应用灰屏相关的常规方案，未找到适配方案，已修复代码中已知错误。部署后登录界面正常，可成功登录进入首页，但刷新浏览器后屏幕变灰，需重新部署才能恢复。调试模式下抛出以下错误：

TypeErrorImpl错误：意外空值。相关错误组件为：MaterialApp（路径：file:///C:/Users//lib/main.dart:50:12）

相关代码 #

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences sharedpreference  = await SharedPreferences.getInstance();
  sharedpreference.getString('email');
  await Firebase.initializeApp( options: const FirebaseOptions(
    apiKey: "AI******YSpsnJ8",
    appId: "1:981*******50",
    messagingSenderId: "******",
    projectId: "tdfsfdf**",
  ),
  );
  if (kIsWeb) {
    print('Web');
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]
    ).then((_) => runApp(const MyApp()));
  } else {
    print('mobil');
    // NOT running on the web! You can check for additional platforms here.
    runApp(const MyApp());
}
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
     home: FirebaseAuth.instance.currentUser == null
          ? const UserLoginPage()
          : const UserHomePage(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      initialRoute: UserLoginPage.id,
      routes:{
        UserLoginPage.id : (context) => const UserLoginPage(),
        AdminServicePage.id : (context) => const AdminServicePage(),
        AdminToolsPage.id : (context) => const AdminToolsPage(),
        AdminDeviationPage.id : (context) => const AdminDeviationPage(),
        AdminUsersPage.id : (context) => const AdminUsersPage(),
        UserHomePage.id : (context) => const UserHomePage(),
        UserToolListPage.id : (context) => const UserToolListPage(),
        WebHomePage.id : (context) => const WebHomePage(),
        WebOverviewPage.id : (context) => const WebOverviewPage(),
       
      },
      debugShowCheckedModeBanner: false,

    );
  }
}

问题分析 #

1. 路由配置冲突：MaterialApp同时设置home和initialRoute会导致路由逻辑混乱，initialRoute会覆盖home的设置，且登录状态仅在Widget构建时判断一次，无法响应Auth状态的动态变化。
2. Auth状态未实时监听：Web端刷新后，FirebaseAuth.instance.currentUser不会立即返回登录用户信息，此时直接判断会得到空值，触发空值异常。
3. 空值未安全处理：代码中未对FirebaseAuth.instance.currentUser的空值场景做兜底处理，直接用于路由判断，导致TypeErrorImpl错误。

解决方案 #

1. 移除冲突的路由配置 #

删除MaterialApp中的home参数，避免与initialRoute的逻辑冲突，改用状态监听来处理初始页面跳转。

2. 用StreamBuilder监听Auth状态变化 #

通过FirebaseAuth.instance.authStateChanges()实时监听用户登录状态，确保Web刷新后能正确获取最新的用户信息，避免空值判断错误。修改后的MyApp代码如下：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          // 处理Auth状态加载中的过渡场景
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 根据用户状态跳转对应页面
          return snapshot.hasData && snapshot.data != null 
              ? const UserHomePage() 
              : const UserLoginPage();
        },
      ),
      routes:{
        UserLoginPage.id : (context) => const UserLoginPage(),
        AdminServicePage.id : (context) => const AdminServicePage(),
        AdminToolsPage.id : (context) => const AdminToolsPage(),
        AdminDeviationPage.id : (context) => const AdminDeviationPage(),
        AdminUsersPage.id : (context) => const AdminUsersPage(),
        UserHomePage.id : (context) => const UserHomePage(),
        UserToolListPage.id : (context) => const UserToolListPage(),
        WebHomePage.id : (context) => const WebHomePage(),
        WebOverviewPage.id : (context) => const WebOverviewPage(),
      },
    );
  }
}

3. 优化初始化逻辑 #

原main函数中SharedPreferences的代码未实际使用，可考虑移除；确保Web端Firebase初始化完成后再启动应用，避免状态判断提前执行。

4. 空值安全兜底 #

在所有涉及FirebaseAuth.instance.currentUser的代码中，添加空值检查或使用空值运算符（?.），避免空值异常触发。

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