flutter bloc使用方法以及源码解析

flutter bloc, provider和getx异同点

一、bloc，环境配置

pubspec.yaml

dependencies: 
    bloc: ^8.1.0  
    flutter_bloc: ^8.1.0  
    equatable: ^2.0.5 // 重写equals和hashcode

为什么使用bloc

Bloc可以比较轻松地将展示层的代码与业务逻辑分开，从而使您的代码快速，易于测试且可重复使用。

在构建高质量的应用程序时，状态管理就变得至关重要。

我们作为开发人员总是希望：

• 知道我们的应用程序在任何时间下的状态。
• 轻松地测试每种情况，以确保我们的应用程序能够正确响应。
• 记录应用程序中的每个用户交互，以便我们做出数据驱动的决策。
• 尽可能高效地工作，并在我们的应用程序内以及跨其他应用程序重用组件。
• 有许多开发人员遵循相同的模式和约定在一个代码库中无缝工作。
• 开发快速反应的应用程序。

Bloc就是在满足所有这些需求以及更多其他需求的情况下被设计出来的。

状态管理的解决方案有很多，决定使用哪种解决方案可能会是一项艰巨的任务。

Bloc在设计时考虑到了以下三个核心价值：

• 简单
  易于理解，可供技能水平不同的开发人员使用。
• 强劲
  通过将它们组成更小的组件，帮助制作出色而复杂的应用程序。
• 可测试
  轻松测试应用程序的各个方面，以便我们可以自信地进行迭代。

Bloc试图通过调节何时可以发生状态更改并在整个应用程序中强制采用一种更改状态的方式来使状态更改可预测。

流（Stream) 是一系列异步的数据.

使用bloc之前，需要对stream有一定了解， stream的简单用法如下：

Stream countStream(int max) async* {
    for (int i = 0; i < max; i++) {
        yield i;
    }
 }

第一种用法 cubit

---

Cubit 类继承自 BlocBase 的类，并且可以扩展到管理任何类型的状态。

cubit_architecture_full.png

一个 Cubit 可以公开触发状态变化的函数。

状态是从 Cubit 中输出的，代表应用程序状态的一部分。可以通知 UI 组件状态，并根据当前状态重绘其自身的某些部分。

创建一个 Cubit

---

class CounterCubit extends Cubit {
    CounterCubit() : super(0);
 }

创建 Cubit 时，我们需要定义 Cubit 将要管理的状态类型。对于上面的 CounterCubit，状态可以通过 int 来表示，但在更复杂的情况下，可能有必要使用 class（类）而不是原始类型。

创建 Cubit 时，我们需要做的第二件事是指定初始状态。我们可以通过使用初始状态的值调用 super 来实现。在上面的代码段中，我们在内部将初始状态设置为 0，但我们也可以通过接受外部值来使 Cubit 更加灵活：

class CounterCubit extends Cubit {
     CounterCubit(int initialState) : super(initialState);
}

我们可以实例化具有不同初始状态的 CounterCubit 实例，例如：

final cubitA = CounterCubit(0); // state starts at 0
final cubitB = CounterCubit(1); // state starts at 1

状态变化

---

每个 Cubit 都有能力通过 emit 输出一个新状态。

class CounterCubit extends Cubit {
    CounterCubit() : super(0);

    void increment() => emit(state + 1);
 }

在上面的代码片段中，CounterCubit 公开了一个名为 increment 的公共方法，可以从外部调用该方法，以通知 CounterCubit 增加其状态。当调用 increment 时，我们可以通过 state 获取器访问 Cubit 的当前状态，并通过向当前状态加 1 来发出 emit 新状态。

emit 函数受到保护，这意味着它只能在 Cubit 内部使用。

使用cubit

---

基础用例

void main() {
    final cubit = CounterCubit();
    print(cubit.state); // 0
    cubit.increment();
    print(cubit.state); // 1
    cubit.close();
 }

流的用例

Future main() async {
  final cubit = CounterCubit();
  final subscription = cubit.stream.listen(print); // 1
  cubit.increment();
  await Future.delayed(Duration.zero);
  await subscription.cancel();
  await cubit.close();
}

在上面的代码段中，我们正在订阅 CounterCubit，并在每次状态更改时调用 print 函数。然后，我们调用 increment 函数，它将发出一个新状态。最后，当我们不再希望接收更新并关闭 Cubit 时，我们在 subscription 上调用 cancel。

观察 Cubit

---

当 Cubit 发出新状态时，将有一个 改变 发生。我们可以通过重写 onChange 方法来观察给定 Cubit 的所有变化。

class CounterCubit extends Cubit {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);

  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
}

然后，我们可以与 Cubit 交互并观察所有输出到控制台的改变。

void main() {
  CounterCubit()
    ..increment()
    ..close();
}

上面的示例将输出的结果：

Change { currentState: 0, nextState: 1 }

注意：在 Cubit 状态更新之前发生 Change 改变。一个 改变 由 currentState 和 nextState 组成。

BlocObserver (Bloc观察者)

---

使用 bloc 库的另一个好处是，我们可以在一处访问所有 变化。即使在此应用程序中只有一个 Cubit，在大型应用程序中也很常见，有许多 Cubits 管理应用程序状态的不同部分。

如果我们希望能够对所有变化做出响应，我们可以简单地创建自己的 BlocObserve (Bloc观察者)来观察改变。

class SimpleBlocObserver extends BlocObserver {
    @override
     void onChange(BlocBase bloc, Change change) {
        super.onChange(bloc, change);
        print('${bloc.runtimeType} $change');
     }
}

注意：我们要做的就是继承 BlocObserver 类并重写 onChange 方法。

为了使用 SimpleBlocObserver，我们只需要调整 main 函数：

void main() {
    Bloc.observer = SimpleBlocObserver();
    CounterCubit()
        ..increment()
        ..close();  
}

上面的代码段将输出的结果：

Change { currentState: 0, nextState: 1 }
CounterCubit Change { currentState: 0, nextState: 1 }

错误处理

---

每个 Cubit 都有一个 addError 方法，该方法可用于指示发生了错误。

class CounterCubit extends Cubit {
    CounterCubit() : super(0);

    void increment() {
        addError(Exception('increment error!'), StackTrace.current);
        emit(state + 1);
     }

     @override
    void onChange(Change change) {
        super.onChange(change);
        print(change);
    }

    @override
    void onError(Object error, StackTrace stackTrace) {
        print('$error, $stackTrace');
        super.onError(error, stackTrace);
     }
 }

注意：onError 方法可以在 Cubit 中被重写，以处理特定 Cubit 的所有错误。

也可以在 BlocObserver 中重写 onError 方法以全局处理所有报告的错误。

class SimpleBlocObserver extends BlocObserver {
    @override
    void onChange(BlocBase bloc, Change change) {
        super.onChange(bloc, change);
        print('${bloc.runtimeType} $change');
     }

    @override
     void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
        print('${bloc.runtimeType} $error $stackTrace');
        super.onError(bloc, error, stackTrace);
     }
 }

如果我们再次运行同一程序，我们应该看到以下输出结果：

Exception: increment error!, #0      CounterCubit.increment (file:///main.dart:21:56)
#1      main (file:///main.dart:41:7)
#2      _startIsolate. (dart:isolate-patch/isolate_patch.dart:301:19)
#3      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)

CounterCubit Exception: increment error! #0      CounterCubit.increment (file:///main.dart:21:56)
#1      main (file:///main.dart:41:7)
#2      _startIsolate. (dart:isolate-patch/isolate_patch.dart:301:19)
#3      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)

Change { currentState: 0, nextState: 1 }
CounterCubit Change { currentState: 0, nextState: 1 }

注意：与 onChange 一样，内部 onError 重写在全局 BlocObserver 重写之前被调用。

在应用中的使用，和BlocProvider结合使用，以计数器为例。

---

第一步：初始化BlocProvider

void main() { 
    Bloc.observer = SimpleBlocObserver();
    runApp(MyApp());
}

class SimpleBlocObserver extends BlocObserver {
      @override
      void onChange(BlocBase bloc, Change change) {
        super.onChange(bloc, change);
        print('${bloc.runtimeType} $change');
      }

      @override
      void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
        print('${bloc.runtimeType} $error $stackTrace');
        super.onError(bloc, error, stackTrace);
      }
}

class MyApp extends StatelessWidget {
    @overrideWidget build(BuildContext context) {  
        return MaterialApp(    
            title: 'Flutter Demo',    
            theme: ThemeData(primarySwatch: Colors.blue, ),   
            home: _isCubit(false), 
        );
    }

    _isCubit(bool isCubit) {  
        //第一步：BlocProvider  
        return isCubit 
            ? BlocProvider(    
                create: (context) => CounterCubit(),    
                child: CounterCubitPage(),  
              ) 
            : BlocProvider(    
                create: (context) => CounterBloc(),    
                child: CounterBlocPage(), 
              );
    }
}

第二步：初始化BlocBuilder

第三步：使用 BlocProvider.of方法查找对应的CounterCubit对象更新数据

---

class CounterCubitPage extends StatelessWidget {  
    @override  Widget build(BuildContext context) {    
        return Scaffold(appBar: AppBar(title: Text("计数器"),),     
            body: Center(
                child: Column(
                        children: [
                                    BlocBuilder(
                                        builder: (context, state) => Text("cubit:${BlocProvider.of(context).state}", 
                                        style:TextStyle(color:Colors.black),)
                                    ),            
                                    Spacer(),           
                                    Text("111", style: TextStyle(color: Colors.black),),  
                                    Spacer(),           
                                    ElevatedButton(onPressed() => BlocProvider.of(context).increment(), child:Text("加法"),),            
                                    Spacer(),            
                                    ElevatedButton(onPressed: () => BlocProvider.of(context).decrement(), child:Text("减法"),),),   
                        ],  
              ),    
       );  
    }
}

使用到的CounterCubit如下：

---

class CounterCubit extends Cubit { 
    CounterCubit() : super(0);  
    void increment() {    
        if(state == 3) {      
            print("test:: increment: 3333");      
            addError(FormatException("format exception"));
        }    
        emit(state + 1);  
    }  
    
    void decrement() => emit(state - 1);
    
    @override  void onChange(Change change) {    
        super.onChange(change);    
        print("test:: onChange: ${change.currentState}");  
    }  
    
    @override  void onError(Object error, StackTrace stackTrace) {
        print("test:: onError: ${error.toString()}, stackTrace: ${stackTrace.toString()}");   
        super.onError(error, stackTrace); 
    }
}

第二种用法 bloc

---

Bloc 是一个更高级的类，它依赖事件来触发状态的改变而不是函数。 Bloc 也扩展了 BlocBase ，这意味着它有着类似于 Cubit 的API。然而， Blocs 不是在 Bloc 上调用函数然后直接发出一个新的状态，而是接收事件并且将传入的事件转换为状态传出。

bloc_architecture_full.png

创建一个 Bloc 类似于创建一个 Cubit，除了定义我们将要管理的状态外，我们还必须定义 Bloc 使其能够处理事件。

事件是将输入进 Bloc 中。通常是为了响应用户交互（例如按钮按下）或生命周期事件（例如页面加载）而添加它们。

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc {
    CounterBloc() : super(0);
}

就像创建 CounterCubit 一样，我们必须指定初始状态，方法是通过 super 方法将其传递给父类。

状态改变

---

Bloc 要求我们通过 on 上注册事件处理程序 API, 而不是在 Cubit 中的功能. 事件处理程序负责将任何传入事件转换为零或多个传出状态.

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) {
      // handle incoming `CounterIncrementPressed` event
    })；
  }
}

提示: EventHandler 可以访问添加的活动以及一个 Emitter 它可以用于响应传入事件而发出零个或多个状态.

然后我们可以更新 EventHandler 来处理 CounterIncrementPressed 事件：

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) {
      emit(state + 1);
    });
  }
}

在上面的代码段中，我们已经注册了一个 EventHandler 句柄管理所有的 CounterIncrementPressed 事件. 每个 CounterIncrementPressed 事件我们可以通过 state getter 方法访问 bloc 的当前状态和通过 emit(state + 1) 改变状态.

注意：由于 Bloc 类继承了 BlocBase，因此我们可以随时通过 state getter 来访问 bloc 的当前状态，就像使用 Cubit 一样。

Bloc 和 Cubits 都会忽略重复的状态。如果我们产生或发出状态 State nextState 当 State == nextState 时，则不会发生状态变化。

使用 Bloc

---

创建 CounterBloc 的实例并将其使用！

基础用例

Future main() async {
  final bloc = CounterBloc();
  print(bloc.state); // 0
  bloc.add(CounterIncrementPressed());
  await Future.delayed(Duration.zero);
  print(bloc.state); // 1
  await bloc.close();
}

在上面的代码片段中，我们首先创建一个 CounterBloc 实例。然后，我们打印 Bloc 的当前状态，该状态为初始状态（因为尚未发出新状态）。接下来，我们添加 CounterIncrementPressed 事件来触发状态改变。最后，我们再次打印从 0 到 1 的 Bloc 状态，并且在 Bloc 上调用 close 关闭内部状态流。

注意：添加了 await Future.delayed(Duration.zero) 以确保我们等待下一个事件循环迭代（允许 EventHandler 处理增量事件）

Stream 的用例

---

就像 Cubit 一样，Bloc 是 Stream 的一种特殊类型，这意味着我们还可以订阅 Bloc 来实时更新其状态：

Future main() async {
  final bloc = CounterBloc();
  final subscription = bloc.stream.listen(print); // 1
  bloc.add(CounterIncrementPressed());
  await Future.delayed(Duration.zero);
  await subscription.cancel();
  await bloc.close();
}

在上面的片段中，我们订阅了 CounterBloc 并在每个状态改变时调用 print 。然后我们添加 CounterIncrementPressed 事件，该事件触发 on EventHandler 并且发出一个新的状态。最后，当我们不想再接收更新时，我们在订阅上调用 cancel ，并关闭 Bloc。

注意：在此示例中添加了 await Future.delayed(Duration.zero)，以避免立即取消订阅。

观察一个 Bloc

---

由于所有 Bloc 都扩展了 BlocBase，因此我们可以使用 onChange 观察 Bloc 的所有状态变化。

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) => emit(state + 1));
  }

  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
}

接下来我们可以将 main.dart 更新为：

void main() {
  CounterBloc()
    ..add(CounterIncrementPressed())
    ..close();
}

现在，如果我们运行上面的代码片段，输出将是：

Change { currentState: 0, nextState: 1 }

Bloc 和 Cubit 之间的主要区别因素是，由于 Bloc 是事件驱动的，因此我们也能够捕获有关触发状态更改的信息。

我们可以通过重写 onTransition 来做到这一点。

从一种状态到另一种状态的转换称为 Transition。Transition 由当前状态，事件和下一个状态组成

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) => emit(state + 1));
  }

  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }

  @override
  void onTransition(Transition transition) {
    super.onTransition(transition);
    print(transition);
  }
}

如果然后从前重新运行相同的 main.dart 代码段，则应看到以下输出：

Transition { currentState: 0, event: Increment, nextState: 1 }
Change { currentState: 0, nextState: 1 }

注意： onTransition 在 onChange 之前被调用，并且包含触发从 currentState 到 nextState 改变的事件。

BlocObserver (Bloc观察者)

---

和以前一样，我们可以在自定义 BlocObserver 中重写 onTransition，以观察从一个位置发生的所有过渡。

class SimpleBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('${bloc.runtimeType} $change');
  }
  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print('${bloc.runtimeType} $transition');
  }
  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    print('${bloc.runtimeType} $error $stackTrace');
    super.onError(bloc, error, stackTrace);
  }
}

我们可以像之前一样初始化 SimpleBlocObserver：

void main() {
  Bloc.observer = SimpleBlocObserver();
  CounterBloc()
    ..add(CounterIncrementPressed())
    ..close();  
}

现在，如果我们运行上面的代码片段，输出应如下所示：

Transition { currentState: 0, event: Increment, nextState: 1 }
CounterBloc Transition { currentState: 0, event: Increment, nextState: 1 }
Change { currentState: 0, nextState: 1 }
CounterBloc Change { currentState: 0, nextState: 1 }

注意： 首先调用 onTransition（在全局之前先于本地），然后调用 onChange。

Bloc 实例的另一个独特功能是，它们使我们能够重写 onEvent，无论何时将新事件添加到 Bloc 都会调用 onEvent。就像 onChange 和 onTransition 一样，onEvent 可以在本地或全局重写。

abstract class CounterEvent {}
class CounterIncrementPressed extends CounterEvent {}
class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) => emit(state + 1));
  }
  @override
  void onEvent(CounterEvent event) {
    super.onEvent(event);
    print(event);
  }
  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
  @override
  void onTransition(Transition transition) {
    super.onTransition(transition);
    print(transition);
  }
}

class SimpleBlocObserver extends BlocObserver {
  @override
  void onEvent(Bloc bloc, Object? event) {
    super.onEvent(bloc, event);
    print('${bloc.runtimeType} $event');
  }
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('${bloc.runtimeType} $change');
  }
  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print('${bloc.runtimeType} $transition');
  }
}

我们可以像以前一样运行相同的 main.dart，并且应该看到以下输出：

Increment
CounterBloc Increment
Transition { currentState: 0, event: Increment, nextState: 1 }
CounterBloc Transition { currentState: 0, event: Increment, nextState: 1 }
Change { currentState: 0, nextState: 1 }
CounterBloc Change { currentState: 0, nextState: 1 }

注意：一旦添加事件，就会调用 onEvent。本地 onEvent 在 BlocObserver 中的全局 onEvent 之前被调用。

错误处理

就像 Cubit 一样，每个 Bloc 都有一个 addError 和 onError 方法。我们可以通过从 Bloc 内部的任何地方调用 addError 来表明发生了错误。然后我们可以像重写 Cubit 一样通过重写 onError 来对所有错误做出反应。

abstract class CounterEvent {}
class CounterIncrementPressed extends CounterEvent {}
class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) {
      addError(Exception('increment error!'), StackTrace.current);
      emit(state + 1);
    });
  }
  @override
  void onChange(Change change) {
    super.onChange(change);
    print(change);
  }
  @override
  void onTransition(Transition transition) {
    print(transition);
    super.onTransition(transition);
  }
  @override
  void onError(Object error, StackTrace stackTrace) {
    print('$error, $stackTrace');
    super.onError(error, stackTrace);
  }
}

如果我们重新运行与以前相同的 main.dart，我们可以看到报告错误时的样子：

Exception: increment error!, #0      new CounterBloc. (file:///main.dart:117:58)
#1      Bloc.on..handleEvent (package:bloc/src/bloc.dart:427:26)
#2      Bloc.on..handleEvent (package:bloc/src/bloc.dart:418:25)
#3      Bloc.on. (package:bloc/src/bloc.dart:435:9)
#4      _MapStream._handleData (dart:async/stream_pipe.dart:213:31)
#5      _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#6      _RootZone.runUnaryGuarded (dart:async/zone.dart:1620:10)
#7      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341:11)
#8      _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#9      _ForwardingStreamSubscription._add (dart:async/stream_pipe.dart:123:11)
#10     _WhereStream._handleData (dart:async/stream_pipe.dart:195:12)
#11     _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#12     _RootZone.runUnaryGuarded (dart:async/zone.dart:1620:10)
#13     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341:11)
#14     _DelayedData.perform (dart:async/stream_impl.dart:591:14)
#15     _StreamImplEvents.handleNext (dart:async/stream_impl.dart:706:11)
#16     _PendingEvents.schedule. (dart:async/stream_impl.dart:663:7)
#17     _microtaskLoop (dart:async/schedule_microtask.dart:40:21)
#18     _startMicrotaskLoop (dart:async/schedule_microtask.dart:49:5)
#19     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:120:13)
#20     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:185:5)

CounterBloc Exception: increment error!, #0      new CounterBloc. (file:///main.dart:117:58)
#1      Bloc.on..handleEvent (package:bloc/src/bloc.dart:427:26)
#2      Bloc.on..handleEvent (package:bloc/src/bloc.dart:418:25)
#3      Bloc.on. (package:bloc/src/bloc.dart:435:9)
#4      _MapStream._handleData (dart:async/stream_pipe.dart:213:31)
#5      _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#6      _RootZone.runUnaryGuarded (dart:async/zone.dart:1620:10)
#7      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341:11)
#8      _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#9      _ForwardingStreamSubscription._add (dart:async/stream_pipe.dart:123:11)
#10     _WhereStream._handleData (dart:async/stream_pipe.dart:195:12)
#11     _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#12     _RootZone.runUnaryGuarded (dart:async/zone.dart:1620:10)
#13     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341:11)
#14     _DelayedData.perform (dart:async/stream_impl.dart:591:14)
#15     _StreamImplEvents.handleNext (dart:async/stream_impl.dart:706:11)
#16     _PendingEvents.schedule. (dart:async/stream_impl.dart:663:7)
#17     _microtaskLoop (dart:async/schedule_microtask.dart:40:21)
#18     _startMicrotaskLoop (dart:async/schedule_microtask.dart:49:5)
#19     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:120:13)
#20     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:185:5)

Transition { currentState: 0, event: Increment, nextState: 1 }
CounterBloc Transition { currentState: 0, event: Increment, nextState: 1 }
Change { currentState: 0, nextState: 1 }
CounterBloc Change { currentState: 0, nextState: 1 }

注意： 首先调用本地 onError，然后调用 BlocObserver 中的全局 onError。

注意： 对于 Bloc 和 Cubit 实例，onError 和 onChange 的工作方式完全相同。

在 EventHandler 中发生的任何未处理的异常也会报告给 onError。

bloc 在项目中的应用 以计数器为例：

---

• 第一步：初始化BlocProvider

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_demo/counter/bloc/counter_bloc.dart';
import 'package:flutter_demo/counter/bloc/counter_bloc_page.dart';
import 'package:flutter_demo/counter/cubit/counter_cubit.dart';
import 'package:flutter_demo/counter/cubit/counter_cubit_page.dart';
void main() {
  Bloc.observer = SimpleBlocObserver();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: _isCubit(true),
    );
  }
  _isCubit(bool isCubit) {
    //第一步：BlocProvider
    return isCubit ? BlocProvider(
      create: (context) => CounterCubit(),
      child: CounterCubitPage(),
    ) : BlocProvider(
      create: (context) => CounterBloc(),
      child: CounterBlocPage(),
    );
  }
}
class SimpleBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('${bloc.runtimeType} $change');
  }
  @override
  void onError(BlocBase bloc, Object error, StackTrace stackTrace) {
    print('${bloc.runtimeType} $error $stackTrace');
    super.onError(bloc, error, stackTrace);
  }
}

• 第二步：初始化BlocBuilder

• 第三步：BlocProvider.of方法添加Event

第二步和第三步代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_demo/counter/bloc/counter_bloc.dart';
import 'package:flutter_demo/counter/bloc/counter_event.dart';
import 'package:flutter_demo/counter/bloc/counter_bloc_state.dart';
class CounterBlocPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("计数器"),),
          body: Center(
            child: Column(
              children: [
                //第二步：BlocBuilder
                BlocBuilder(builder: (context, state) {
                  return Text("bloc: ${state.value}", style: TextStyle(color: Colors.black),);
                }),
                Spacer(),
                Text("111", style: TextStyle(color: Colors.black),),
                Spacer(),
                ElevatedButton(onPressed: () => _increment(context), child: Text("加法"),),
                Spacer(),
                ElevatedButton(onPressed: () => _decrement(context), child: Text("减法"),),
              ],
            ),
          ),
    );
  }
  void _increment(context) {
    //第三步：BlocProvider.of
    BlocProvider.of(context).add(CounterIncrement());
  }
  _decrement(BuildContext context) {
    BlocProvider.of(context).add(CounterSubduction());
  }
}

• 对应的Event事件：

import 'package:equatable/equatable.dart';
import 'package:flutter/cupertino.dart';
@immutable
abstract class CounterEvent extends Equatable {
  @override
  List get props => [];
}
class CounterIncrement extends  CounterEvent {
}
class CounterSubduction extends CounterEvent {
}

• 对应的State状态

import 'package:equatable/equatable.dart';
import 'package:flutter/cupertino.dart';
@immutable
abstract class CounterBlocState extends Equatable{
  final int value;
  CounterBlocState(this.value);
  @override
  List get props => [value];
}
class CounterBlocInitial extends CounterBlocState {
    CounterBlocInitial(int value) : super(value);
}
class CounterBlocChange extends CounterBlocState {
  CounterBlocChange(int value) : super(value);
}

Flutter Equatable的作用

bloc中使用的比较多，因为经常比较状态，用来重写==（类似于java中的equals方法）和hashcode方法：

• 举个例子，不使用Equatable：

class Person {
  const Person(this.name);
  final String name;
  @override
  bool operator ==(Object other) =>
    identical(this, other) ||
    other is Person &&
    runtimeType == other.runtimeType &&
    name == other.name;
  @override
  int get hashCode => name.hashCode;
}
print(bob == Person("Bob")); // true

• 使用Equatable后，可以简化为：

import 'package:equatable/equatable.dart';
class Person extends Equatable {
  const Person(this.name);
  final String name;
  @override
  List