Flutter中如何从子路由访问AutoRoute的TabsRouter？

问题根源 #

你的路由配置和AutoTabsRouter的使用方式存在冲突：

1. 在路由表中给AuthPage定义了children（Login/SignUp页面），但又在AuthView中手动给AutoTabsRouter传入routes参数，导致路由层级混乱，子路由的context无法识别外层的TabsRouter。
2. 手动创建SignUpPageRoute实例并传递参数，破坏了auto_route的自动路由管理机制，进一步导致上下文层级异常。

解决方案 #

1. 修正路由表配置

确保AuthPage的子路由配置与AutoTabsRouter管理的路由一致，同时设置初始路由：

AutoRoute(
  path: NavRoutes.authPage,
  page: AuthPage,
  children: [
    AutoRoute(
      path: NavRoutes.loginPage,
      page: LoginPage,
      initial: true, // 设置Login为默认显示的页面
    ),
    AutoRoute(
      path: NavRoutes.signupPage,
      page: SignUpPage,
    ),
  ],
)

2. 调整AuthView中的AutoTabsRouter使用

移除手动传入的routes参数，让AutoTabsRouter自动关联路由表中AuthPage的子路由；同时利用Bloc的全局共享特性传递回调，避免手动创建路由实例：

class AuthView extends StatelessWidget {
  const AuthView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Bloc已在全局提供，SignUpPage可直接获取，无需通过路由传参
    return Scaffold(
      body: SafeArea(
        child: AutoTabsRouter(
          builder: (context, child, animation) {
            return FadeTransition(
              opacity: animation,
              child: child,
            );
          },
        ),
      ),
    );
  }
}

3. 在子路由中正确获取TabsRouter

在LoginPage或SignUpPage中，通过父路由名称定位TabsRouter：

// 示例：在LoginPage中切换到SignUpPage
void switchToSignUp(BuildContext context) {
  final tabsRouter = context.innerRouterOf<TabsRouter>(AuthPageRoute.name);
  tabsRouter?.setActiveIndex(1);
}

4. 处理SignUpPage的回调

由于已经通过BlocProvider全局提供了AuthCubit，在SignUpPage中直接获取即可：

// SignUpPage内部
final cubit = BlocProvider.of<AuthCubit>(context);
// 调用Google登录
cubit.signInGoogle();

5. 重新生成路由代码

修改路由配置后，务必运行以下命令更新auto_route的生成代码：

flutter pub run build_runner build --delete-conflicting-outputs

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