Flutter集成responsive_framework导致NavigatorKey为空的问题

问题场景 #

在Flutter应用中集成responsive_framework包时，将MaterialApp的builder从直接返回child改为返回ResponsiveWrapper.builder后，原本全局定义的GlobalKey<NavigatorState>()对应的_navigator（通过NavigatorState? get _navigator => globalKey.currentState;获取）变为null，调用_navigator!.pushNamedAndRemoveUntil(LOGGED_OUT_HOME, (route) => false);时抛出空指针异常。

原MaterialApp代码 #

return MaterialApp(
        theme: lightTheme,
        darkTheme: darkTheme,
        navigatorKey: globalKey,
        onGenerateRoute: (settings) {
          return AppRoutes.onGenerateRoute(settings, ref);
        },
        builder: (_, child) {
          return child!;
        });
}

修改后的代码 #

return MaterialApp(
        theme: lightTheme,
        darkTheme: darkTheme,
        navigatorKey: globalKey,
        onGenerateRoute: (settings) {
          return AppRoutes.onGenerateRoute(settings, ref);
        },
        builder: (context, child) {
          return ResponsiveWrapper.builder(
              BouncingScrollWrapper(child: child!),
              breakpoints: const [
                ResponsiveBreakpoint.resize(350, name: MOBILE),
                ResponsiveBreakpoint.autoScale(600, name: TABLET),
                ResponsiveBreakpoint.resize(800, name: DESKTOP),
                ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
              ]);
        });

成因解析 #

核心问题是ResponsiveWrapper.builder会在MaterialApp原有的Navigator之上插入额外的Widget层级，导致全局navigatorKey无法正确绑定到实际的NavigatorState：

• 原代码中，builder直接返回child，这个child就是MaterialApp内部创建的Navigator实例，navigatorKey可以直接关联到该Navigator的State对象。
• 修改后，ResponsiveWrapper将Navigator包裹进了自身的Widget树结构中，MaterialApp的navigatorKey只能查找它直接创建的子Widget，无法穿透层级定位到被包裹的Navigator，最终globalKey.currentState返回null。

解决办法 #

将全局globalKey同时传递给ResponsiveWrapper的navigatorKey参数，让它关联到内部实际的Navigator：

builder: (context, child) {
  return ResponsiveWrapper.builder(
      BouncingScrollWrapper(child: child!),
      navigatorKey: globalKey, // 新增该行，传递全局key
      breakpoints: const [
        ResponsiveBreakpoint.resize(350, name: MOBILE),
        ResponsiveBreakpoint.autoScale(600, name: TABLET),
        ResponsiveBreakpoint.resize(800, name: DESKTOP),
        ResponsiveBreakpoint.autoScale(1700, name: 'XL'),
      ]);
});

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