Flutter中BottomNavBar手势触发时出现No GoRouter上下文异常

这个断言异常的核心原因是：你调用GoRouter.of(context)时，当前使用的BuildContext没有被GoRouter的作用域覆盖——简单说就是这个context找不到GoRouter的实例。下面是具体的排查和解决方法：

1. 确保BottomNavBar处于GoRouter的作用域内 #

检查你的App结构，必须保证MaterialApp.router（承载GoRouter的根Widget）是整个App的顶层Widget，而BottomNavBar是它的子树节点。

错误示例（BottomNavBar不在GoRouter作用域）：

// 错误：BottomNavBar的context来自MyApp，不在MaterialApp.router的子树里
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavBar(), // 这里的context找不到GoRouter
      body: MaterialApp.router(routerConfig: goRouter),
    );
  }
}

正确示例：

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: goRouter, // 你的GoRouter全局实例
      title: 'App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// HomePage是GoRouter作用域内的页面，它的context能找到GoRouter
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavBar(), // 这里的context继承自HomePage，属于GoRouter作用域
      body: const Center(child: Text('Home')),
    );
  }
}

2. 避免使用错误的Context #

如果你的BottomNavBar是在StatefulWidget中，不要在initState、didChangeDependencies等早期生命周期方法中调用GoRouter.of(context)——此时Widget还没完全挂载到GoRouter的子树中。

另外，如果BottomNavBar是通过全局key或其他非常规方式获取的context，也可能导致上下文失效，尽量使用当前Widget树传递的context。

3. 应急方案：直接调用GoRouter全局实例（不推荐） #

如果暂时无法调整Widget结构，可以直接用全局定义的GoRouter实例跳转，绕过context的问题：

// 全局定义GoRouter实例
final GoRouter goRouter = GoRouter(
  routes: [
    GoRoute(path: '/', builder: (context, state) => const HomePage()),
    GoRoute(path: '/profile', builder: (context, state) => const ProfilePage()),
  ],
);

// 在BottomNavBar的IconButton中使用
IconButton(
  icon: const Icon(Icons.person),
  onPressed: () {
    goRouter.push('/profile'); // 直接调用全局实例，无需context
  },
)

注意：这种方式会破坏依赖注入的封装性，不利于测试和代码维护，仅作为临时解决方案。

4. 用Builder获取正确的Context #

如果BottomNavBar必须放在特殊层级（比如MaterialApp.router的同级），可以用Builder Widget包裹它，获取子级的有效context：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: goRouter,
      title: 'App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Builder(
        builder: (context) {
          // 这里的context属于MaterialApp.router的子树
          return Scaffold(
            bottomNavigationBar: BottomNavBar(),
          );
        },
      ),
    );
  }
}

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