使用NavigationRail结合Navigator时抛出上下文异常求助

你在MainView中调用Navigator.pushNamed(context, '/dashinfo')时使用的context，不属于Navigator组件的子树范围。因为MaterialApp的builder函数返回的MainView是Navigator的父级组件，这个context无法找到对应的Navigator实例，因此抛出异常。

下面提供三种可行的解决方式，你可以根据需求选择：

方式一：使用全局navigatorKey（推荐，你已定义） #

直接利用代码中已声明的全局navigatorKey来操作Navigator，修改MainView的onDestinationSelected回调：

onDestinationSelected: (int index) {
  setState(() {
    _selectedIndex = index;
    if (index != 0) {
      // 替换原有的Navigator调用
      navigatorKey.currentState?.pushNamed('/dashinfo');
    }
  });
},

方式二：强制获取根Navigator #

通过Navigator.of的rootNavigator参数，跳过当前context直接获取应用的根Navigator：

onDestinationSelected: (int index) {
  setState(() {
    _selectedIndex = index;
    if (index != 0) {
      Navigator.of(context, rootNavigator: true).pushNamed('/dashinfo');
    }
  });
},

方式三：调整组件结构（更符合Flutter路由规范） #

将MainView作为路由页面，而非MaterialApp的builder包裹层，让MainView处于Navigator的子树中：

1. 修改main.dart的MaterialApp配置：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      navigatorKey: navigatorKey,
      initialRoute: '/main',
      routes: {
        '/main': (BuildContext context) => const MainView(),
        '/dash': (BuildContext context) => const DashView(),
        '/dashinfo': (BuildContext context) => const DashInfoView(),
      },
    );
  }
}

2. 修改main_view.dart，移除child参数，将右侧区域改为路由显示容器（更适配NavigationRail的页面切换场景）：

class MainView extends StatefulWidget {
  const MainView({super.key});

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  int _selectedIndex = 0;
  // 定义索引与路由的映射关系
  final Map<int, String> _routeMap = {
    0: '/dash',
    1: '/dashinfo',
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('text'),
      ),
      body: Row(
        children: <Widget>[
          NavigationRail(
            labelType: NavigationRailLabelType.all,
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
              // 切换路由（用pushReplacement避免路由栈累积）
              Navigator.pushReplacementNamed(context, _routeMap[index]!);
            },
            destinations: const [
              NavigationRailDestination(
                  icon: Icon(Icons.abc), label: Text('zero')),
              NavigationRailDestination(
                  icon: Icon(Icons.abc), label: Text('Home1')),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          // 显示当前路由对应的页面
          const Expanded(child: RouterOutlet()),
        ],
      ),
    );
  }
}

这种方式让组件结构更清晰，也更符合Flutter的路由管理逻辑。

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