Provider、Bloc、GetX的使用区别和原理

1. 使用区别

以最简单的 计数器 为例, 来区分三者的写法差异

说明：范例都统一创建了state文件，为了适用复杂逻辑，实际应用中，页面或逻辑简单可在模板创建时选择简易模式。

以下三种可以依次浅记为"notifyListeners()"、"Event/cubit"、".obs"来大致区分。

Provider

1.导入

provider: ^6.0.2

2.安装插件

安装插件1.png

3.使用

image.png

模板.png	生成代码.png

View：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart';

class CounterPage extends StatelessWidget {
 TextEditingController ttt=TextEditingController();

 @override
 Widget build(BuildContext context) {
   return ChangeNotifierProvider(
     create: (BuildContext context) => CounterProvider(),
     builder: (context, child) => _buildPage(context),
   );
 }

 Widget _buildPage(BuildContext context) {
   final provider = context.read<CounterProvider>();
   final state = provider.state;


   return Scaffold(
     appBar: AppBar(title: Text('Provider范例')),
     body: Center(
       child: Consumer<CounterProvider>(
         builder: (context, provider, child) {
           return Text(
             '点击了 ${state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => provider.increment(),//按钮事件
       child: Icon(Icons.add),
     ),
   );
 }
}

Provider：

import 'package:flutter/material.dart';
import 'counter_state.dart';

class CounterProvider extends ChangeNotifier {
 final state = CounterState();

 void increment() {
   state.count++;
   notifyListeners();//通知更新
 }
}

State：

class CounterState {

 late int count;

 CounterState() {
   // init some variables
   count = 0; //初始化
 }
}

Bloc

bloc 8.0 之前

1.导入

flutter_bloc: ^6.1.1 #状态管理框架
equatable: ^1.2.3 #增强组件相等性判断

2.安装插件

官方---安装插件2-1.png

或者：

推荐使用---安装插件2-2.png

3.使用

$\color{LightSkyBlue}{推荐安装使用}$ Flutter Bloc 插件生成代码，它是作者基于官方的Bloc优化过的插件，自动生成view文件，并优化了代码结构。

< bloc > :

bloc8.0- bloc.png	代码生成.png

view：

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

import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => CounterBloc()..add(InitEvent()),//添加初始化事件
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final bloc = BlocProvider.of<CounterBloc>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-bloc-8.0-范例')),
     body: Center(
      //BlocBuilder: 颗粒化刷新
       child: BlocBuilder<CounterBloc, CounterState>(
         builder: (context, state) {
           return Text(
             '点击了 ${bloc.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => bloc.add(CounterIncrementEvent()),//添加按钮点击事件
       child: Icon(Icons.add),
     ),
   );
 }
}

bloc ：

import 'package:bloc/bloc.dart';

import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
 CounterBloc() : super(CounterState().init());

 @override
 Stream<CounterState> mapEventToState(CounterEvent event) async* {
   if (event is InitEvent) {
     yield await init();
   }else if(event is CounterIncrementEvent){
     yield CountIncrement();
   }
 }

 Future<CounterState> init() async {
   return state.clone();
 }


 CounterState  CountIncrement(){
   return state.clone()..count=state.count+1;
 }

}

event ：

abstract class CounterEvent {}

class InitEvent extends CounterEvent {}

class CounterIncrementEvent extends CounterEvent {

}

state：

class CounterState {
 int count;

 CounterState init() {
   return CounterState()
   ..count=0;
 }

 CounterState clone() {
   return CounterState()
   ..counter = count;
 }
}

< cubit > :

bloc8.0- cubit .png	生成代码.png

view:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter2_cubit.dart';
import 'counter2_state.dart';

class Counter2Page extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => Counter2Cubit(),
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final cubit = BlocProvider.of<Counter2Cubit>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-cubit-8.0-范例')),
     body: Center(
       child: BlocBuilder<Counter2Cubit, Counter2State>(
         builder: (context, state) {
           return Text(
             '点击了 ${cubit.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => cubit.increment(),//按钮事件
       child: Icon(Icons.add),
     ),
   );
 }
}

cubit :

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

class Counter2Cubit extends Cubit<Counter2State> {
 Counter2Cubit() : super(Counter2State().init());

 // emit：发流刷新
 void increment() => emit(
     state.clone()..count = ++state.count
 );
}

State：

class Counter2State {

 late int count;

 Counter2State init() {
   return Counter2State()
     ..count = 0;
 }

 Counter2State clone() {
   return Counter2State()
     ..count = count;
 }
}

bloc 8.0+

bloc8.0+的版本，对比之前的写法简直是破坏式的改变，你如果升级到bloc 8.0及其以上的版本，之前写的bloc模式写法已经完全不兼容了，mapEventToState方法直接被移除了，一运行项目，bloc内部也会给出报错，需要你手动去注册处理器。

虽然是破坏式的改变写法，但是新写法是非常的优雅，彻底改变了以前的mapEventToState方法中的各种判断Event。

1.导入

flutter_bloc: ^8.0.1

2.安装插件

安装插件3.png

3.使用

image.png

< bloc > :

模板.png	代码生成.png

view ：

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

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return BlocProvider(
     create: (BuildContext context) => CounterBloc()..add(InitEvent()),
     child: Builder(builder: (context) => _buildPage(context)),
   );
 }

 Widget _buildPage(BuildContext context) {
   final bloc = BlocProvider.of<CounterBloc>(context);

   return Scaffold(
     appBar: AppBar(title: Text('Bloc-bloc-8.0+范例')),
     body: Center(
       child: BlocBuilder<CounterBloc, CounterState>(
         builder: (context, state) {
           return Text(
             '点击了 ${bloc.state.count} 次',
             style: TextStyle(fontSize: 30.0),
           );
         },
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () => bloc.add(CounterIncrementEvent()),//按钮添加点击事件
       child: Icon(Icons.add),
     ),
   );
 }
}

bloc ：

import 'package:bloc/bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
 CounterBloc() : super(CounterState().init()) {
   //页面初始化时刻
   on<InitEvent>(_init);
   //计数器自增
   on<CounterIncrementEvent>(_increment);
 }

 void _init(InitEvent event, Emitter<CounterState> emit) async {
   //处理一些初始化操作,然后刷新界面
   emit(state.clone());
 }

 ///自增
 void _increment(CounterIncrementEvent event, Emitter<CounterState> emit) {
   state.count++;
   emit(state.clone());
 }
}

event :

abstract class CounterEvent {}

class InitEvent extends CounterEvent {}

class CounterIncrementEvent extends CounterEvent {}

state :

class CounterState {
 late int count;

 CounterState init() {
   return CounterState()
     ..count = 0;
 }

 CounterState clone() {
   return CounterState()
     ..count = count;
 }
}

< cubit > :

模板.png	生成代码.png

代码跟bloc8.0之前的相同，就不贴出来了。

GetX

1.导入

get: ^4.6.1

2.安装插件

安装插件4.png

3.使用

image.png

模板.png	生成代码.png

View：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'counter_logic.dart';

class CounterPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final logic = Get.put(CounterLogic());
   final state = Get.find<CounterLogic>().state;

   return Scaffold(

       appBar: AppBar(title: Text('计数器')),
       // 使用Obx(()=>每当改变计数时，就更新Text()。
       body: Obx(() {
         return Center(child: Text('点击了 ${state.count} 次',style: TextStyle(fontSize: 30),));
       }),
       floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add), onPressed: logic.increment));//按钮事件
 }
}

Logic:

import 'package:get/get.dart';
import 'counter_state.dart';

class CounterLogic extends GetxController {
 final CounterState state = CounterState();


 void increment() {
   state.count++;
 }

}

State:

import 'package:get/get.dart';

class CounterState {

  var count;

  CounterState() {
    ///Initialize variables
     count = 0.obs; //初始化   定义为Rx变量
  }
}

2. 原理

Provider

Provider状态框架，对系统资源占用极低，它仅仅只使用了ChangeNotifier，这仅仅是最基础的Callback回调，这会占用多少资源？刷新逻辑全是调用Flutte的framework层自带的那些api（获取InheritedElement的内部操作很简单）。。。所以完全不用担心，他会占用多少资源，几乎忽略不计！

前置知识.png

刷新机制.png

总流程.png

涉及ChangeNotifierProvider、ListenableProvider、InheritedProvider、_InheritedProviderScope、_InheritedProviderScopeElement 这五个关键类。

判定.png

总流程.png

添加监听.png

监听的流转主要涉及ChangeNotifierProvider、ListenableProvider、InheritedProvider 这三个类。

流转示意图.png

流程图.png

1.png

ListenableProvider .png

_InheritedProviderScopeElement .png

2.png

刷新流程.png

以上原理的详细讲解 及其它比如 BuildContext、Provider.of()、MultiProvider、Consumer、Selector的分析，请查看原作者的文章：《 Flutter Provider的另一面（万字图文+插件）》。

Bloc

Bloc.png

3.png

4.png

5.png

作用.png

BlocProvider.png

6.png

7.png

8.png

总结.png

以上原理的详细讲解 , 请查看原作者的文章：《 Flutter Bloc背后的思想，一篇纠结的文章》。

此外，更多使用请点击下方链接查看：
flutter_bloc使用解析---骚年，你还在手搭bloc吗！

GetX

1. 前置知识

8.png

优势.png

2. 依赖注入

9.png

依赖注入前.png

依赖注入后.png

瞬间就想到了中介者模式
这也是控制反转的思想（创建对象的控制权本来在自己手上，现在交给了第三方）

3. GetBuilder刷新机制

9.png

GetBuilder .png

总结：

刷新机制.png

4. Obx刷新机制

10.png

Rx变量.png

添加监听.png

监听转移.png

总结.png

以上原理的详细讲解 , 请查看原作者的文章：《 Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）》。

此外，更多使用请点击下方链接查看：
GetX插件的详细使用
 Flutter GetX使用---简洁的魅力！
GetX的README.zh—使用说明

3. Demo

综合以上的范例和文章中涉及的三篇原作者文章中的" $\color{brown}{手搓一个状态管理框架}$ "，整合了三个Demo，分别是：provider_demo、bloc_demo (bloc_demo1: 8.0 前、bloc _demo2: 8.0后)、getx_demo。

其自定义状态管理框架分别为EasyP、EasyC、EasyX, 其效果可在main中使用use目录下的view来查看。 Demo目录如下👇🏻：

如果你的公司，不想使用第三方状态管理框架，完全可以将下面自定义状态管理框架拿来用，在已有骨架的基础上填充血肉。

demo目录.png

main.png

三个状态管理插件的的 详细使用 还请查阅其官方API。

地址

Demo: flutter_state_manager_demo

最后编辑于：2022.04.15 14:15:31

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,126评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,254评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,445评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,185评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,178评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,970评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,276评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,927评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,400评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,883评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,997评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,646评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,213评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,204评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,423评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,423评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,722评论 2赞 345

Provider、Bloc、GetX的使用区别和原理

1. 使用区别

Provider

Bloc

GetX

2. 原理

Provider

Bloc

GetX

1. 前置知识

2. 依赖注入

3. GetBuilder刷新机制

4. Obx刷新机制

3. Demo

目录

地址

推荐阅读更多精彩内容