Flutter项目同时使用AuthBloc与ProductsBloc时页面跳转无响应求助

问题核心原因 #

1. 跳转逻辑无监听：你在ProductsBloc中产出的GoToDetailsState没有对应的监听逻辑执行跳转操作，ProductPage内的BlocBuilder仅用于构建按钮UI，收到新状态只会重建按钮，不会触发跳转。
2. 路由监听逻辑错误：根路由AppRouterDelegate仅绑定了全局AuthBloc的状态，GoToDetailsState属于ProductsBloc的状态子类，路由层根本感知不到该状态的变化，对应的详情页判断条件永远不会生效。
3. Bloc作用域不匹配：ProductsBloc仅在ProductPage内部注册，作用域仅限ProductPage的子树，根节点的路由层无法访问到该Bloc的实例和状态。

修复方案 #

方案一：本地监听跳转（改动最小，推荐） #

无需调整全局路由和Bloc注册逻辑，直接在ProductPage内新增BlocListener监听状态执行跳转，符合Bloc的规范（副作用操作放在BlocListener，UI构建放在BlocBuilder）。
修改后的ProductPage代码如下：

class ProductPage extends StatelessWidget {
  const ProductPage();

  @override
  Widget build(BuildContext context) {
    return BlocProvider<ProductsBloc>(
      create: (context) => ProductsBloc(),
      // 新增BlocListener处理跳转副作用
      child: BlocListener<ProductsBloc, ProductsState>(
        listener: (context, state) {
          state.maybeWhen(
            goToDetailsState: () {
              // 直接调用导航跳转详情页
              Navigator.of(context).push(MaterialPage(builder: (_) => const DetailsPage()));
            },
            orElse: () {},
          );
        },
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Products'),
          ),
          body: Center(
            child: FittedBox(
              child: BlocBuilder<ProductsBloc, ProductsState>(
                builder: (context, state) {
                  return TextButton(
                    child: const Text("More Details"),
                    onPressed: () => context.read<ProductsBloc>().add(const ProductsEvent.goToDetailsEvent()),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方案二：全局状态驱动路由（适合统一管控所有路由的场景） #

如果你的架构要求所有路由都由全局Bloc状态驱动，可以按以下步骤调整：

1. 提升ProductsBloc到根节点全局注册，修改MyApp代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<AuthBloc>(create: (context) => AuthBloc()),
        // 全局注册ProductsBloc
        BlocProvider<ProductsBloc>(create: (context) => ProductsBloc()),
      ],
      child: MaterialApp(
        home: Router(
          routerDelegate: AppRouterDelegate(),
          backButtonDispatcher: RootBackButtonDispatcher(),
        ),
      ),
    );
  }
}

2. 修改AppRouterDelegate，同时监听两个Bloc的状态构建路由栈：

@override
Widget build(BuildContext context) {
  // 同时获取两个Bloc的状态
  final authState = context.watch<AuthBloc>().state;
  final productState = context.watch<ProductsBloc>().state;
  
  return Navigator(
    key: navigatorKey,
    pages: [
      const MaterialPage(key: ValueKey("Home"), child: HomePage()),
      if (authState is SignInState)
        const MaterialPage(key: ValueKey("Auth"), child: AuthPage()),
      if (productState is ProductState)
        const MaterialPage(key: ValueKey("Product"), child: ProductPage()),
      // 从ProductsBloc状态判断是否展示详情页
      if (productState is GoToDetailsState)
        const MaterialPage(key: ValueKey("Details"), child: DetailsPage()),
    ],
    onPopPage: (route, result) {
      if (!route.didPop(result)) return false;
      return true;
    },
  );
}

3. 删除ProductPage内部的BlocProvider，避免重复创建Bloc实例。

无报错原因说明 #

点击按钮后事件正常分发到ProductsBloc，Bloc也正常产出了GoToDetailsState，但全程没有逻辑错误，只是没有对应的监听执行跳转操作，因此不会抛出异常也不会有页面变化。

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