如何用GoRouter与Flutter Bloc实现多屏注册并保留导航栈？

针对你遇到的ShellRoute跳转问题，以及多页面数据收集的需求，这里提供几个可行的方案：

方案1：嵌套路由+全局BlocProvider（推荐） #

将整个注册流程作为独立的嵌套路由分支，在路由根节点提供全局的RegistrationBloc，既可以集中共享数据，又能正常使用push保持导航历史。

路由结构示例 #

final goRouter = GoRouter(
  routes: [
    // 登录页路由
    GoRoute(
      path: '/login',
      builder: (context, state) => LoginPage(),
    ),
    // 注册流程根路由：包裹BlocProvider
    GoRoute(
      path: '/register',
      builder: (context, state) => BlocProvider(
        create: (context) => RegistrationBloc(),
        child: const Scaffold(body: Router()), // 用Router承载子路由页面
      ),
      // 注册流程的子页面路由
      routes: [
        GoRoute(
          path: 'fields1',
          builder: (context, state) => RegistrationFields1Page(),
        ),
        GoRoute(
          path: 'fields2',
          builder: (context, state) => RegistrationFields2Page(),
        ),
      ],
    ),
  ],
);

页面跳转与数据收集 #

在第一页填写完成后，先将数据提交到Bloc，再用push跳转：

// RegistrationFields1Page
onPressed: () {
  final name = _nameController.text;
  final email = _emailController.text;
  // 更新Bloc中的数据
  context.read<RegistrationBloc>().add(
        RegistrationDataUpdated(name: name, email: email),
      );
  // 用push跳转，保留登录页的导航历史
  GoRouter.of(context).push('/register/fields2');
},

第二页可以直接读取Bloc中的已有数据，继续补充新信息：

// RegistrationFields2Page
onPressed: () {
  final dob = _dobController.text;
  final accountType = _accountTypeDropdown.value;
  context.read<RegistrationBloc>().add(
        RegistrationDataUpdated(dob: dob, accountType: accountType),
      );
  // 提交注册逻辑...
},

这个方案的优势是数据集中管理，导航历史正常，完全匹配你的需求。

方案2：修正ShellRoute的路由配置 #

如果你坚持使用ShellRoute，可能是之前的路由结构设置错误导致push失效。正确的配置应该让注册页面作为Shell的子路由，且跳转路径正确：

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/login',
      builder: (context, state) => LoginPage(),
    ),
    ShellRoute(
      // Shell页面：提供Bloc和统一的注册页框架（如AppBar）
      builder: (context, state, child) => BlocProvider(
        create: (context) => RegistrationBloc(),
        child: Scaffold(
          appBar: AppBar(title: const Text('注册')),
          body: child,
        ),
      ),
      // 子路由对应注册的两个页面
      routes: [
        GoRoute(
          path: '/register/fields1',
          builder: (context, state) => RegistrationFields1Page(),
        ),
        GoRoute(
          path: '/register/fields2',
          builder: (context, state) => RegistrationFields2Page(),
        ),
      ],
    ),
  ],
);

从登录页跳转到注册第一页时用push('/register/fields1')，在第一页跳转到第二页同样用push('/register/fields2')，此时导航栈会保留login -> fields1 -> fields2，返回操作正常。

方案3：SharedPreferences临时存储（备选） #

如果不想依赖Bloc共享数据，可以用SharedPreferences临时存储各页面数据，最后提交时汇总。但需要注意注册完成或取消后清理临时数据：

第一页存储数据 #

onPressed: () async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('reg_name', _nameController.text);
  await prefs.setString('reg_email', _emailController.text);
  GoRouter.of(context).push('/register/fields2');
},

第二页读取并补充数据 #

// 在initState中读取
@override
void initState() {
  super.initState();
  _loadTempData();
}

void _loadTempData() async {
  final prefs = await SharedPreferences.getInstance();
  final savedName = prefs.getString('reg_name');
  final savedEmail = prefs.getString('reg_email');
  // 可以显示已填数据或直接使用
}

// 提交时存储新数据并清理
onPressed: () async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('reg_dob', _dobController.text);
  await prefs.setString('reg_account_type', _accountTypeDropdown.value);
  
  // 提交注册请求...
  
  // 清理临时数据
  await prefs.remove('reg_name');
  await prefs.remove('reg_email');
  await prefs.remove('reg_dob');
  await prefs.remove('reg_account_type');
  
  // 返回登录页
  GoRouter.of(context).popUntil((route) => route.name == '/login');
},

这个方案的缺点是数据分散在本地存储，不如Bloc集中管理直观，且需要额外处理数据清理逻辑。

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