当前位置:网站首页>Why does blocprovider feel similar to provider?
Why does blocprovider feel similar to provider?
2022-07-01 21:48:00 【InfoQ】
Preface
Last one
Less than 40 One line of code BlocProvider
, We only used less than 40 A line of code hand rolled a
SimpleBlocProvider
, It feels OK to use , This is it. Bloc One of the advantages of , You can be based on
Bloc
This model extends itself , Form your own state management component . Let's take a look at the official
flutter_bloc
Plugins provide
BlocProvider
What about? .
Provider Imitator ?
Let's see first
BlocProvider
Implementation of the counter sample code :
class BlocCounterWrapper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => CounterCubit(),
child: BlocCounterPage(),
);
}
}
class BlocCounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bloc Counter '),
),
body: Center(
child: BlocBuilder<CounterCubit, int>(
builder: (context, count) => Text(
'$count',
style: TextStyle(
fontSize: 32,
color: Colors.blue,
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
context.read<CounterCubit>().increment();
},
tooltip: ' Click to increase ',
child: Icon(Icons.add),
),
);
}
}
Is this code very familiar ? If we look back on our previous
Provider
State management , It feels very similar ! such as :
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => CounterCubit(),
child: BlocCounterPage(),
);
}
stay
Provider
The implementation in is as follows .
Widget build(BuildContext context) {
return Provider(
create: (_) => CounterCubit(),
child: BlocCounterPage(),
);
}
And in the
FloatingActionButton
Inside
context.read
The usage is the same as
Provider
The same in . therefore , If you want to from
Provider
Migrate to Bloc It's also very simple . Actually, from the source code layer by layer up , You will find that there is provider Code for .
library flutter_bloc;
export 'package:bloc/bloc.dart';
export 'package:provider/provider.dart'
show ProviderNotFoundException, ReadContext, SelectContext, WatchContext;
And from
Provider
and
bloc
Of GitHub Among the source code contributors, we also found
Provider
The code contributor to Felix Angelov Namely bloc The originator of the code ..


So it's not surprising Bloc Use in Provider 了 .
And Provider Similarities and differences
BlocProvider
and
Provider
equally , Provide status data for sub components through component tree . That is, we can use
Provider
The use of
BlocProvider
, For example, the use of existing state objects and
Provider
The use of
value
parameter assignment :
final counter = CounterCubit();
//...
BlocProvider.value(
value: counter,
child: SomeWidget(),
);
For example, it can be used in subcomponents
context.read
and
context.watch
. And the use of select Method listens for partial changes in state data .
final isPositive = context.select((CounterBloc b) => b.state >= 0);
also
MultiBlocProvider
To pass multiple... To the subcomponent tree Bloc State object .
MultiBlocProvider(
providers: [
BlocProvider<BlocA>(
create: (BuildContext context) => BlocA(),
),
BlocProvider<BlocB>(
create: (BuildContext context) => BlocB(),
),
BlocProvider<BlocC>(
create: (BuildContext context) => BlocC(),
),
],
child: ChildA(),
)
so to speak , If you used
Provider
State management , Can move seamlessly to
BlocProvider
. Of course , The state object class still needs to be changed . This is also
BlocProvider
and
Provider
The difference between . For example, state objects do not need to implement
ChangeNotifier
Interface , When the state data changes, there is no need to call
notifyListeners
To inform refresh . Actually, we start from
BlocProvider
The source code picks out a method of monitoring the implementation of state objects , In fact, it is also used here that we are
SimpleBlocProvider
Used in
Stream.listen
Method to achieve .
static VoidCallback _startListening(
InheritedContext<BlocBase?> e,
BlocBase value,
) {
final subscription = value.stream.listen(
(dynamic _) => e.markNeedsNotifyDependents(),
);
return subscription.cancel;
}
The code of other parts is basically reuse
Provider
Code for . therefore
BlocProvider
It can be seen as using
Stream.listen
Listen for status data
ChangeNotifer
Of
Provider
Variants . therefore , If you want to go from
Provider
Switch to
BlocProvider
, You can switch boldly , The workload of code modification is very low . And there is no need to call... Repeatedly in the state object
notifyListeners
To notify that the interface has been refreshed .
summary
This article introduces
BlocProvider
Use , In terms of writing , Don't feel too much advantage , Personally, I think this is what the author wants
Provider
Users can switch directly to
BlocProvider
To provide such a
Provider
substitute . however , This is just the tip of the iceberg , actually ,
flutter_bloc
There are many other options , We will introduce them one by one .

边栏推荐
猜你喜欢
随机推荐
《軟件工程導論(第六版)》 張海藩 複習筆記
统计字符中每个字符出现的个数
cmake工程化相关
多个张量与多个卷积核做卷积运算的输出结果
CNN卷积神经网络原理讲解+图片识别应用(附源码)[通俗易懂]
薛定谔的日语学习小程序源码
Past and present life of product modular design
matlab遍历图像、字符串数组等基本操作
C中main函数的几种写法
2022年高处安装、维护、拆除考题模拟考试平台操作
leetcode刷题:二叉树01(二叉树的前序遍历)
基于三维GIS的不动产管理应用
新版Free手机、PC、平板、笔记本四端网站缩略展示图在线一键生成网站源码
ICML2022 | 基于元语义正则化的介入性对比学习
二叉树的基本操作
require与import的区别和使用
2022安全员-B证考试练习题模拟考试平台操作
There are four ways to write switch, you know
【深度学习】利用深度学习监控女朋友的微信聊天?
leetcode刷题:二叉树02(二叉树的中序遍历)