Less than 40 lines of code to create a blocprovider

Preface

We were right in the last one  BLoC Made an overall introduction , I understand  BLoC  After the use of , I can't help feeling a little itchy , I have written several state management plug-ins , Can we use it  BLoC I'll have one myself  Flutter  State management component , Used to build based on  BLoC  In response Flutter page . Do as you say , We name this state management component  

SimpleBlocProvider

.

SimpleBlocProvider

Definition

For this simple state management component  

SimpleBlocProvider

, Because it needs to be placed in the component tree , So it must be a  Widget, Because the data needs to be maintained internally , So we use  

StatefulWidget

. wait ！ It's not that it's not recommended to use  

StatefulWidget

  Do you ？ We need to pay attention to , If the component maintains its own state , It doesn't affect external components, that's no problem . for instance , When a button is clicked, it will have a click effect , This actually needs to be used  

StatefulWidget

  Realization , But this behavior will only cause self refresh , That's no problem .

secondly , We're going to put the original  UI  Component construction

SimpleBlocProvider

In the to , Then you need to define a   Build components builder  Parameters , All original  UI Components are built by this  builder  To complete , At the same time the  

builder

  It should carry the latest status data , To update  UI  Components . and , The type of status data cannot be determined , So the  

builder

  It should be back  

Widget

  Generic functions of , The definition is as follows .

typedef StateBuilder<T> = Widget Function(T state);


For example, display counter  Text, We could write it this way ：

SimpleBlocProvider<int> (
 builder: (count) => Text('$count'),
)


Only have  

builder

  Is not enough , We need to  Bloc  Logical components , In order to obtain the latest status data from the logical component , Therefore, it is necessary to  Bloc  Logical components are also given as parameters  

SimpleBlocProvider

. So we got it

SimpleBlocProvider

The basic definition of .

class SimpleBlocProvider<T> extends StatefulWidget {
 final StateBuilder<T> builder;
 final BlocBase<T> bloc;
 const SimpleBlocProvider(
 {Key? key, required this.builder, required this.bloc})
 : super(key: key);

 @override
 _SimpleBlocProviderState<T> createState() => _SimpleBlocProviderState<T>();
}


BLoC  Refresh

To achieve  BLoC  Refresh , We need to monitor  BLoC  Changes in status data , We know from the last article that BLoC  Is based on  

Stream

  Realized , about  

Stream

, You can use it  

listen

  Method to monitor  

Stream

  Changes in stream data .listen  The method is defined as follows ：

 StreamSubscription<T> listen(void onData(T event)?,
 {Function? onError, void onDone()?, bool? cancelOnError});


therefore , We can do it in  

listen

  Of  

onData

  Call in  

setState

  You can refresh the interface . We need to cancel listening when the component is destroyed , So we have

_SimpleBlocProviderState

  Define a property in

_streamSubscription

Storage  

listen

  Return value of method , And in  

dispose

  Cancel monitoring .

_streamSubscription = widget.bloc.stream.listen((data) {
 setState(() {
 _state = data;
 });
});

//

@override
void dispose() {
 _streamSubscription.cancel();
 super.dispose();
}


Next, it's easier , stay

_SimpleBlocProviderState

Of  

build

  Method to return  

builder

  Carry status data

_state

Build components .

@override
Widget build(BuildContext context) {
 return widget.builder(_state);
}


such , as long as  BLoC  The status data of has changed , Would pass  

listen

Listen for updates

SimpleBlocProvider

Of

_state

, And refresh

SimpleBlocProvider

Components , So it updates  

builder

  Built components . The complete code is as follows ：

typedef StateBuilder<T> = Widget Function(T state);

class SimpleBlocProvider<T> extends StatefulWidget {
 final StateBuilder<T> builder;
 final BlocBase<T> bloc;
 const SimpleBlocProvider(
 {Key? key, required this.builder, required this.bloc})
 : super(key: key);

 @override
 _SimpleBlocProviderState<T> createState() => _SimpleBlocProviderState<T>();
}

class _SimpleBlocProviderState<T> extends State<SimpleBlocProvider<T>> {
 late T _state;
 late StreamSubscription<T> _streamSubscription;

 @override
 void initState() {
 _state = widget.bloc.state;
 super.initState();
 _streamSubscription = widget.bloc.stream.listen((data) {
 setState(() {
 _state = data;
 });
 });
 }

 @override
 Widget build(BuildContext context) {
 return widget.builder(_state);
 }

 @override
 void dispose() {
 _streamSubscription.cancel();
 super.dispose();
 }
}


Less than in all 40 A line of code is done

！

SimpleBlocProvider  application

Now let's see how to use , Let's start with a counter .

class CounterCubit extends Cubit<int> {
 CounterCubit({initial = 0}) : super(initial);

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

 @override
 void onChange(Change<int> change) {
 super.onChange(change);
 }
}

class SimpleBlocCounterPage extends StatelessWidget {
 final counter = CounterCubit();
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Bloc  Counter '),
 ),
 body: Center(
 child: SimpleBlocProvider<int>(
 builder: (count) => Text(
 '$count',
 style: TextStyle(
 fontSize: 32,
 color: Colors.blue,
 ),
 ),
 bloc: counter,
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () {
 counter.increment();
 },
 tooltip: ' Click to increase ',
 child: Icon(Icons.add),
 ),
 );
 }
}


Is it the same as what we used before  MobX,GetX  Of  

GetBuilder

  Is very similar ？ Let's look at custom classes , Let's have a simple one  

Person

  class , And then use  Bloc  Of  

event

  Try mode .

class Person {
 final String name;
 final String gender;

 const Person({required this.name, required this.gender});
}

abstract class PersonEvent {}

class UsingCnNameEvent extends PersonEvent {}

class UsingEnNameEvent extends PersonEvent {}

class PersonBloc extends Bloc<PersonEvent, Person> {
 PersonBloc(Person person) : super(person) {
 on<UsingCnNameEvent>(
 (event, emit) => emit(Person(name: ' Ma Nong on the island ', gender: ' male ')));
 on<UsingEnNameEvent>(
 (event, emit) => emit(Person(name: 'island-coder', gender: 'male')));
 }
}

class SimpleBlocCounterPage extends StatelessWidget {
 final personBloc = PersonBloc(Person(name: ' Ma Nong on the island ', gender: ' male '));
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Bloc  event '),
 ),
 body: Center(
 child: SimpleBlocProvider<Person>(
 builder: (person) => Text(
 ' full name ：${person.name}, Gender ：${person.gender}',
 style: TextStyle(
 fontSize: 22,
 color: Colors.blue,
 ),
 ),
 bloc: personBloc,
 ),
 ),
 floatingActionButton: FloatingActionButton(
 onPressed: () {
 personBloc.add(UsingEnNameEvent());
 },
 tooltip: ' Click to increase ',
 child: Icon(Icons.add),
 ),
 );
 }
}


It's OK to run .

summary

This article introduces the use of  BLoC  Implement simple state management  

SimpleBLocProvider

, This custom  BlocProvider Less than 40 That's ok , Of course, there is still a gap between this code and actual use , However, it is helpful to understand the implementation mechanism of these third-party state management plug-ins . Next we will use the official  

flutter_bloc

  In terms of plug-ins, specific application examples .