Flutter GetX项目热重载触发GlobalKey重复及空值异常问题

问题现象 #

• 项目首次运行完全正常：启动进入SplashPage，根据用户登录状态自动跳转至HomePage或LoginScreen
• 仅在VS Code热重载时触发两个异常：
  1. Directionality组件抛出Unexpected null value类型错误
  2. 控制台提示A GlobalKey was used multiple times，涉及的Key为LabeledGlobalKey<NavigatorState>#c60d4
• 重启项目后异常消失，仅热重载时复现

问题原因 #

1. GlobalKey重复绑定：GetMaterialApp内部的Navigator GlobalKey在热重载时未正确重置，旧的Key被重复绑定到新生成的Navigator实例上；同时SplashPage中使用Get.offAll直接跳转Widget，热重载时新旧路由栈冲突，导致GlobalKey复用。
2. Directionality上下文缺失：热重载时Widget树重建过程中，LoginScreen中依赖上下文的方法（如displaySize）在Directionality未完全初始化时被调用，获取到null值触发异常。

解决方案 #

1. 修复GlobalKey重复问题 #

方案一：将MyApp改为无状态组件

StatefulWidget在热重载时会保留旧状态，改为StatelessWidget可避免状态残留：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/splashpage',
      getPages: [
        GetPage(name: '/splashpage', page: () => SplashPage()),
        GetPage(name: '/loginpage', page: () => LoginScreen()),
        GetPage(name: '/homepage', page: () => HomePage()),
      ],
      title: 'Flutter Admin Panel2',
      theme: lightMode,
      darkTheme: darkMode,
    );
  }
}

方案二：手动指定唯一的NavigatorKey

在GetMaterialApp中显式生成新的GlobalKey，确保热重载时Key重新初始化：

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      navigatorKey: _navigatorKey,
      initialRoute: '/splashpage',
      getPages: [
        GetPage(name: '/splashpage', page: () => SplashPage()),
        GetPage(name: '/loginpage', page: () => LoginScreen()),
        GetPage(name: '/homepage', page: () => HomePage()),
      ],
      title: 'Flutter Admin Panel2',
      theme: lightMode,
      darkTheme: darkMode,
    );
  }
}

2. 修复Directionality空值异常 #

方案一：使用GetX内置的尺寸方法替代上下文依赖

直接使用GetX提供的Get.height和Get.width，无需依赖BuildContext：

class LoginScreen extends StatelessWidget {
  // 替换原有的displayHeight/displayWidth方法
  double get displayHeight => Get.height;
  double get displayWidth => Get.width;

  // 其余代码不变
}

方案二：为上下文方法增加断言检查

确保调用displaySize时上下文已包含Directionality：

Size displaySize(BuildContext context) {
  assert(
    Directionality.of(context) != null,
    '当前上下文未包含Directionality，请确保在MaterialApp/GetMaterialApp的子组件中调用此方法',
  );
  return MediaQuery.of(context).size;
}

3. 优化路由跳转逻辑 #

统一使用命名路由跳转，避免直接跳转Widget导致的路由栈冲突：

• 修改SplashPage的_redirect方法：

Future<void> _redirect() async {
  await Future.delayed(const Duration(seconds: 2));
  final session = Supabase.instance.client.auth.currentSession;
  if (!mounted) return;
  if (session != null) {
    Get.offAllNamed('/homepage');
  } else {
    Get.offAllNamed('/loginpage');
  }
}

• 修改LoginScreen中登录成功的跳转代码：

if (response.user != null) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Login Success'),
      backgroundColor: Colors.green,
    ),
  );
  Get.offAllNamed('/homepage'); // 替换原有的Get.to
}

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