Why does blocprovider feel similar to provider?

Preface

Last one Flutter Introduction and actual combat （ eighty-six ）： 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 .