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

问题描述

以下是来自的示例代码：

https://bloclibrary.dev/#/flutterbloccoreconcepts

我遇到以下异常，

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

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

构建CounterPage（dirty）时引发了以下断言：

在不包含Cubit的上下文中调用的

BlocProvider.of（） 类型为CounterBloc。

从所传递的上下文开始找不到祖先 到BlocProvider.of（）。

如果您使用的上下文来自上方的小部件，则可能会发生这种情况 BlocProvider。

使用的上下文是：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;
    }
  }
}

解决方法

如果没有父级的BlocProvider，则不能使用'BlocProvider.of'。
您只需创建一个“ CounterBloc”并将该bloc传递给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);
              },],);
  }
}

,

似乎我忘了向CounterPage提供bloc的实例。将CounterPage小部件包装在BlocProvider中，然后像这样创建该bloc的实例，即可达到目的：

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(),);
  }
}