BlocBuilder报错：无法找到正确的Provider<TransactionBloc>

进入任何与TransactionBloc相关的页面时，应用抛出异常：无法找到当前BlocBuilder<TransactionBloc, List<Transaction>>组件上方正确的Provider<TransactionBloc>

当前使用的代码片段：

body: BlocBuilder<TransactionBloc, List<Transaction>>(
          builder: (context, transactions) {
            return ListView.builder(
              itemCount: transactions.length,
              itemBuilder: (context, index) {
                final transaction = transactions[index];
                return Dismissible(
                  key: Key(transaction.id.toString()),
                  onDismissed: (direction) {
                    context.read<TransactionBloc>().add(
                          DeleteTransactionEvent(transaction.id),
                        );
                  },
                  background: Container(
                    color: Colors.red,
                    alignment: Alignment.centerRight,
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: const Icon(Icons.delete, color: Colors.white),
                  ),
                  child: TransactionListItem(transaction: transaction),
                );
              },
            );
          },
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            buildFloatingActionButton(
              context,
              Icons.refresh,
              () => context.read<TransactionBloc>().add(FetchTransactionsEvent())
            ),
            const SizedBox(height: 16),
            buildFloatingActionButton(
              context,
              Icons.list,
              () => navigate(context, const TransactionsScreen()),
            ),
            const SizedBox(height: 16),
            buildFloatingActionButton(
              context,
              Icons.person,
              () => navigate(context, const ProfileScreen()),
            ),
            const SizedBox(height: 16),
    buildFloatingActionButton(
      context,
      Icons.delete,
      () {
        // Replace 1 with the transactionId you want to delete
        context.read<TransactionBloc>().add(const DeleteTransactionEvent(1));
      },
    ),

预期效果：正常查看交易历史，能删除或撤销自动支付交易。

解决方案 #

1. 在BlocBuilder上层添加BlocProvider #

必须在当前页面或其父级组件树中，通过BlocProvider创建并提供TransactionBloc实例，确保BlocBuilder能从上下文获取到该实例。

示例：在导航到交易页面时包裹BlocProvider

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BlocProvider(
      create: (context) => TransactionBloc()..add(FetchTransactionsEvent()),
      child: const TransactionsScreen(),
    ),
  ),
);

如果是全局共享的Bloc，可以在App根节点（如MaterialApp外层）用BlocProvider或MultiBlocProvider提供。

2. 检查导航上下文的有效性 #

确保跳转交易页面时使用的上下文能访问到BlocProvider，避免在没有Provider的孤立上下文里跳转页面。

3. 验证Bloc初始化逻辑 #

在BlocProvider的create方法中提前触发FetchTransactionsEvent，确保页面加载时能获取到交易数据，避免空列表或状态异常。

修复后完整页面示例 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('交易历史')),
      body: BlocBuilder<TransactionBloc, List<Transaction>>(
        builder: (context, transactions) {
          return ListView.builder(
            itemCount: transactions.length,
            itemBuilder: (context, index) {
              final transaction = transactions[index];
              return Dismissible(
                key: Key(transaction.id.toString()),
                onDismissed: (direction) {
                  context.read<TransactionBloc>().add(
                        DeleteTransactionEvent(transaction.id),
                      );
                },
                background: Container(
                  color: Colors.red,
                  alignment: Alignment.centerRight,
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: const Icon(Icons.delete, color: Colors.white),
                ),
                child: TransactionListItem(transaction: transaction),
              );
            },
          );
        },
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          buildFloatingActionButton(
            context,
            Icons.refresh,
            () => context.read<TransactionBloc>().add(FetchTransactionsEvent())
          ),
          const SizedBox(height: 16),
          buildFloatingActionButton(
            context,
            Icons.list,
            () => navigate(context, const TransactionsScreen()),
          ),
          const SizedBox(height: 16),
          buildFloatingActionButton(
            context,
            Icons.person,
            () => navigate(context, const ProfileScreen()),
          ),
          const SizedBox(height: 16),
          buildFloatingActionButton(
            context,
            Icons.delete,
            () {
              // Replace 1 with the transactionId you want to delete
              context.read<TransactionBloc>().add(const DeleteTransactionEvent(1));
            },
          ),
        ],
      ),
    );
  }
}

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