BlocProvider.of() 调用的上下文不包含 CounterBloc 类型的 Cubit

Posted 2023-03-17

【中文标题】BlocProvider.of() 调用的上下文不包含 CounterBloc 类型的 Cubit

【英文标题】：BlocProvider.of() called with a context that does not contain a Cubit of type CounterBloc

【发布时间】：2020-12-30 22:30:57

【问题描述】：

以下是来自的示例代码：

https://bloclibrary.dev/#/flutterbloccoreconcepts

我收到以下异常，

如何解决以下异常以及为什么会发生这种情况：

════════ 小部件库捕获的异常 ══════════════════════════════════════════════════ ═════

在构建 CounterPage(dirty) 时抛出了以下断言：

使用不包含 Cubit 的上下文调用 BlocProvider.of() CounterBloc 类型。

从传递的上下文开始找不到祖先 到 BlocProvider.of()。

如果您使用的上下文来自 块提供者。

使用的上下文是：CounterPage(dirty)

main.dart

import 'package:flutter/material.dart';

import 'counter_page.dart';

void main() 
  runApp(MyApp());
 
class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Bloc Counter Example',
      home: CounterPage(),
    );
  

counter_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import'package:flutterbloc_counter_app/counter_bloc.dart';

class CounterPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (context, count) 
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        ,
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () 
                counterBloc.add(CounterEvent.increment);
              ,
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () 
                counterBloc.add(CounterEvent.decrement);
              ,
            ),
          ),
        ],
      ),
    );
  

counter_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
    
enum CounterEvent  increment, decrement 

class CounterBloc extends Bloc<CounterEvent, int> 
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* 
    switch (event) 
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.increment:
        yield state + 1;
        break;
    
  

【参考方案1】：

你不能在没有 BlocProvider 的情况下使用'BlocProvider.of'。 您只需创建一个“CounterBloc”并将该块传递给 BlocBuilder。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import'package:flutterbloc_counter_app/counter_bloc.dart';

class CounterPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final CounterBloc counterBloc = CounterBloc();

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        bloc: counterBloc,
        builder: (context, count) 
          return Center(
            child: Text(
              '$count',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        ,
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () 
                counterBloc.add(CounterEvent.increment);
              ,
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () 
                counterBloc.add(CounterEvent.decrement);
              ,
            ),
          ),
        ],
      ),
    );
  

【参考方案2】：

看来我忘了向 CounterPage 提供一个 bloc 实例。将 CounterPage 小部件包装在 BlocProvider 中并像这样创建块的实例就可以了：

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Bloc Counter Example',
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );