Why does blocprovider feel similar to provider?

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 .