Flutter Bloc中根据状态处理路由，优化认证启动进度条异常

问题根源 #

你当前的实现存在两个核心问题：

1. 在build方法中调用_getToken会导致该逻辑被多次触发（build方法可因布局变化、状态更新重复执行），引发不必要的重复检查。
2. 未明确区分「初始未检查状态」和「正在检查状态」，导致应用启动时直接进入加载UI，出现异常的进度条。

优化方案 #

1. 补充明确的认证状态类型

给AuthState增加两个状态，用于区分启动阶段的不同状态：

abstract class AuthState {}

// 应用启动时的初始状态，未开始检查认证
class AuthInitial extends AuthState {}
// 正在读取token、检查认证的加载状态
class AuthLoading extends AuthState {}
// 已认证状态
class Authenticated extends AuthState {}
// 未认证状态
class UnAuthenticated extends AuthState {}

2. 将token检查逻辑移至Bloc内部

把读取token的逻辑从UI层移到AuthBloc的初始化流程中，避免UI层触发异步操作：

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    // 监听检查认证的事件
    on<CheckAuthEvent>(_handleCheckAuth);
    
    // Bloc初始化时自动触发认证检查
    add(CheckAuthEvent());
  }

  Future<void> _handleCheckAuth(CheckAuthEvent event, Emitter<AuthState> emit) async {
    emit(AuthLoading());
    // 读取存储中的token逻辑（示例用SharedPreferences）
    final prefs = await SharedPreferences.getInstance();
    final token = prefs.getString('auth_token');
    
    if (token != null && token.isNotEmpty) {
      emit(Authenticated());
    } else {
      emit(UnAuthenticated());
    }
  }
}

// 定义检查认证的事件
class CheckAuthEvent extends AuthEvent {}

3. 优化LoginScreen的状态渲染逻辑

根据明确的状态类型，分别渲染对应UI，避免初始状态下直接显示进度条：

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        if (state is Authenticated) {
          return const HomeScreen();
        }
        if (state is UnAuthenticated) {
          return const _SignInPage();
        }
        if (state is AuthLoading) {
          return Container(
            color: const Color(0xFFF39360),
            child: const Center(child: CircularProgressIndicator(color: Colors.white)),
          );
        }
        // AuthInitial状态下显示闪屏页或空白过渡页，替代异常进度条
        return const SplashScreen();
      },
    );
  }
}

// 自定义闪屏页示例
class SplashScreen extends StatelessWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFFF39360),
      child: const Center(
        child: Text('App Name', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

优化效果 #

• 应用启动时先显示闪屏页，避免初始阶段的异常进度条。
• token检查逻辑由Bloc统一管理，避免UI层重复触发异步操作。
• 状态划分清晰，UI渲染逻辑更严谨，不会出现未定义状态下的异常显示。

内容的提问来源于stack exchange，提问作者Joaquín Varela