Flutter问题：添加navigatorKey后setState无法更新UI

问题根源 #

当给MaterialApp添加GlobalKey<NavigatorState>后，Flutter会复用该Key对应的NavigatorState实例，导致父组件MyApp的setState()无法触发MaterialApp内部的页面更新——因为Flutter认为MaterialApp的状态没有变化，不会重新构建其内部的UI树。

可行方案 #

方案1：直接通过NavigatorKey操作页面跳转

放弃用setState()切换MaterialApp的home，改为在用户状态变化时，通过navigatorKey直接调用Navigator的跳转方法切换页面：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @override
  void initState() {
    super.initState();
    FirebaseAuth.instance.authStateChanges().listen((user) {
      final route = MaterialPageRoute(
        builder: (_) => user != null ? HomePage() : LoginPage(),
      );
      _navigatorKey.currentState?.pushReplacement(route);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      // 设置初始加载页，避免首次启动空白
      home: const SplashScreen(),
    );
  }
}

方案2：用StreamBuilder在MaterialApp内部监听状态

把用户状态监听逻辑移到MaterialApp的home里，用StreamBuilder直接响应authStateChanges流的变化，无需依赖父组件的setState()：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      home: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const SplashScreen();
          }
          return snapshot.hasData ? HomePage() : LoginPage();
        },
      ),
    );
  }
}

为什么这两个方案有效 #

• 方案1绕过了setState()触发UI重建的逻辑，直接通过Navigator API控制页面切换，完全不受navigatorKey对组件复用的影响。
• 方案2把状态监听和UI更新逻辑放在MaterialApp内部，StreamBuilder会自主响应流的变化重建子UI，不会被navigatorKey导致的组件复用阻断更新。

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