Flutter Bloc结合flutter_login：如何等待事件完成并获取状态数据

一、等待Bloc事件执行完成再返回结果 #

flutter_login的onLogin和onRecoverPassword回调支持异步函数，你可以通过监听Bloc的状态流，等待对应的处理完成状态后再返回结果。

方式1：在回调内等待状态更新 #

以登录场景为例，通过stream.firstWhere过滤出登录完成的状态：

onLogin: (loginData) async {
  final authBloc = BlocProvider.of<AuthBloc>(context);
  // 触发登录事件
  authBloc.add(LoginEvent(
    username: loginData.name, 
    password: loginData.password
  ));
  
  // 等待登录结果状态
  final state = await authBloc.stream.firstWhere(
    (state) => state is LoginSuccess || state is LoginFailed,
  );
  
  if (state is LoginFailed) {
    // 返回错误消息，flutter_login会自动展示
    return state.errorMessage;
  } else {
    // 登录成功，返回null表示无错误
    return null;
  }
},

方式2：用BlocListener单独处理消息提示 #

这种方式更贴合Bloc单向数据流的设计，把UI提示逻辑从回调中分离：

// 在页面Widget树中添加BlocListener
BlocListener<AuthBloc, AuthState>(
  listener: (context, state) {
    if (state is LoginFailed) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.errorMessage)),
      );
    } else if (state is LoginSuccess) {
      // 处理登录成功后的页面跳转等逻辑
    } else if (state is RecoverPasswordSuccess) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.successMessage)),
      );
    }
  },
  child: FlutterLogin(
    onLogin: (loginData) {
      BlocProvider.of<AuthBloc>(context).add(
        LoginEvent(
          username: loginData.name, 
          password: loginData.password
        ),
      );
      // 返回空Future，交由BlocListener处理后续逻辑
      return Future.value(null);
    },
    onRecoverPassword: (email) {
      BlocProvider.of<AuthBloc>(context).add(
        RecoverPasswordEvent(email: email),
      );
      return Future.value(null);
    },
    // 其他配置项...
  ),
)

二、关于状态中存储消息的合理性 #

状态中可以存储临时提示消息，但建议将状态拆分为更细粒度的类型，而非单独存一个通用消息字段。比如定义以下状态：

abstract class AuthState {}

class AuthInitial extends AuthState {}

// 登录相关状态
class LoginLoading extends AuthState {}
class LoginSuccess extends AuthState {}
class LoginFailed extends AuthState {
  final String errorMessage;
  LoginFailed(this.errorMessage);
}

// 找回密码相关状态
class RecoverPasswordLoading extends AuthState {}
class RecoverPasswordSuccess extends AuthState {
  final String successMessage;
  RecoverPasswordSuccess(this.successMessage);
}
class RecoverPasswordFailed extends AuthState {
  final String errorMessage;
  RecoverPasswordFailed(this.errorMessage);
}

这种设计的优势：

• 状态语义明确，每个状态对应唯一业务场景
• 避免状态冗余，无需同时维护loginMessage和recoverPasswordMessage等字段
• UI层更容易区分状态，执行对应逻辑

临时消息处理完成后，可以通过发送AuthInitial这类初始状态来清除，避免重复触发提示。

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