Flutter中Bloc状态已执行但路由切换后UI不更新问题求助

我在Flutter项目中同时用Bloc做状态管理、Getx做路由管理。之前已经把GetMaterialApp包裹在BlocProvider里，解决了路由切换后读不到Bloc的问题。

当前Bloc用于FirebaseAuth功能，不通过底部导航栏切换页面时，登录、登出都正常，状态逻辑没问题；但用底部导航栏（通过Get.toNamed()切换路由）之后，点登出按钮，Bloc的登出状态已经执行了，UI却切不到登出状态（回不到登录表单）。

我试过加BlocProvider但没解决，希望实现登出状态执行后UI自动切回登录表单的效果。相关代码如下：

main.dart 代码 #

import ;...

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    BlocProvider<AuthBloc>(
      create: (context) => AuthBloc(FirebaseAuthProvider()),
      child: GetMaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: theme(),
        home: const MainPage(),
        /*BlocProvider<AuthBloc>(
          create: (context) => AuthBloc(FirebaseAuthProvider()),
          child: const MainPage(),
        ),*/
        getPages: RoutesClass.routes,
        // routes: {
        // verifyEmailRoute: (context) => const VerifyEmailView(), // not used
        // },
        // routes: routes, // switch to getx
      ),
    ),
  );
}

页面Body代码 #

import 'package:facerecognitionattendance/services/auth/bloc/auth_bloc.dart';
import 'package:facerecognitionattendance/services/auth/bloc/auth_event.dart';
import 'package:facerecognitionattendance/utilities/dialogs/logout_dialog.dart';
import 'package:facerecognitionattendance/views/profile/components/profile_menu.dart';
import 'package:facerecognitionattendance/views/profile/components/profile_pic.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart' show ReadContext;

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

  @override
  State<Body> createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 20),
        child: Column(
          children: [
            const ProfilePic(),
            const SizedBox(height: 20),
            ProfileMenu(
              text: "My Account",
              icon: "assets/icons/User Icon.svg",
              press: () => {},
            ),
            ProfileMenu(
              text: "Notifications",
              icon: "assets/icons/notification.svg",
              press: () {},
            ),
            ProfileMenu(
              text: "Settings",
              icon: "assets/icons/Settings.svg",
              press: () {},
            ),
            ProfileMenu(
              text: "Log Out",
              icon: "assets/icons/Log out.svg",
              press: () async {
                final shouldLogout = await showLogOutDialog(context);
                if (shouldLogout) {
                  if (!mounted) return;
                  context.read<AuthBloc>().add(
                        const AuthEventLogOut(),
                      ); // HERE
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

问题核心是Getx路由切换后，全局层面没有监听Bloc的登出状态来触发路由跳转，导致状态更新后UI没有响应。按以下步骤修改：

1. 全局监听AuthBloc状态
   在main.dart中用BlocListener包裹GetMaterialApp，专门监听AuthBloc的登出状态，触发Getx路由跳转：

   import ;...
   import 'package:flutter_bloc/flutter_bloc.dart';
   
   void main() {
     WidgetsFlutterBinding.ensureInitialized();
     runApp(
       BlocProvider<AuthBloc>(
         create: (context) => AuthBloc(FirebaseAuthProvider())..add(const AuthEventInitialize()),
         child: BlocListener<AuthBloc, AuthState>(
           listener: (context, state) {
             // 捕捉登出状态，清空路由栈跳转到登录页
             if (state is AuthStateLoggedOut) {
               Get.offAllNamed('/login');
             }
           },
           child: GetMaterialApp(
             debugShowCheckedModeBanner: false,
             title: 'Flutter Demo',
             theme: theme(),
             home: const MainPage(),
             getPages: RoutesClass.routes,
           ),
         ),
       ),
     );
   }
   

2. 确保页面正确响应Bloc状态
   你的MainPage需要用BlocBuilder实时监听Auth状态，动态显示页面：

   class MainPage extends StatelessWidget {
     const MainPage({super.key});
   
     @override
     Widget build(BuildContext context) {
       return BlocBuilder<AuthBloc, AuthState>(
         builder: (context, state) {
           if (state is AuthStateLoggedIn) {
             return BottomNavigationBarPage(); // 你的底部导航页面
           } else {
             return const LoginPage();
           }
         },
       );
     }
   }
   

3. 删除重复的BlocProvider
   彻底删掉之前注释的MainPage内部的BlocProvider，保证全局只有一个AuthBloc实例，避免状态不一致。

4. 确认Bloc状态发射逻辑
   检查AuthBloc中处理AuthEventLogOut的代码，确保正确发射AuthStateLoggedOut：

   @override
   Stream<AuthState> mapEventToState(AuthEvent event) async* {
     if (event is AuthEventLogOut) {
       await _authProvider.logOut();
       yield AuthStateLoggedOut(); // 必须正确发射这个状态
     }
     // 其他事件处理逻辑...
   }
   

这样修改后，点击登出按钮触发事件，Bloc发射登出状态，全局监听器会立即触发Getx路由跳转，同时页面的BlocBuilder也会自动更新UI，实现登出后回到登录表单的效果。

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