Flutter Bloc初始加载时AuthEventCheck事件未触发问题排查

我刚接触Flutter Bloc框架，希望在页面初始加载时调用AuthEventCheck事件，但以下代码中的该事件并未触发。

主程序代码 #

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => BlocProvider(
              create: (context) => AuthBloc()..add(AuthEventCheck()),
              child: const HomePage(),
            ),
      },
    );
  }
}

Bloc文件代码 #

import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

part 'auth_event.dart';
part 'auth_state.dart';

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    on<AuthEventCheck>((event, emit) {
      print('AuthEventCheck');
    });
  }
}

事件未触发的原因 #

1. 事件添加时机不匹配：在BlocProvider.create函数里创建Bloc并立即add事件时，Bloc还未与页面中的BlocBuilder/BlocConsumer建立订阅关系，此时事件处理逻辑的绑定还未完成，导致事件被加入队列后无法执行。
2. 路由生命周期冲突：MaterialApp路由中创建BlocProvider的方式，会让Bloc先于页面完成初始化，事件发出时页面尚未构建完成，没有对应的监听者响应事件。

解决方法 #

方法一：在Bloc构造函数中直接触发事件（简单场景首选） #

修改AuthBloc的构造函数，在注册事件处理器后直接添加初始化事件：

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthInitial()) {
    on<AuthEventCheck>((event, emit) {
      print('AuthEventCheck');
    });
    // 构造函数内直接添加初始化事件
    add(AuthEventCheck());
  }
}

主程序代码简化为：

'/': (context) => BlocProvider(
      create: (context) => AuthBloc(),
      child: const HomePage(),
    ),

方法二：在页面的initState中添加事件（依赖页面上下文时使用） #

将HomePage改为StatefulWidget，在页面初始化阶段获取Bloc并添加事件：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // 页面初始化完成后触发事件
    context.read<AuthBloc>().add(AuthEventCheck());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面内容
    );
  }
}

主程序中BlocProvider无需再手动add事件：

'/': (context) => BlocProvider(
      create: (context) => AuthBloc(),
      child: const HomePage(),
    ),

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