Use blocconsumer to build responsive components and monitor status at the same time

Preface

In the last article, we used  

BlocListener

  Monitor the state changes and do some corresponding processing , At the same time  

BlocBuilder

  Build a responsive interface . Review the code , We will find that there are redundant parts , We need to  

BlocBuilder

  As  

BlocListener

  The child components , It's actually a little awkward , because  

BlocBuilder

The built page should not be  

BlocListener

  The child components , It's a peer structure . Is there a better way to solve this problem , in fact ,flutter_bloc  given  

BlocConsumer

  To solve this problem .

BlocConsumer Implementation mechanism

BlocConsumer

  Like  

BlocBuilder

and  

BlocListener

  Aggregate component of , Support building responsive components while listening for state changes . At the same time, it also supports refreshing components according to conditions or listening callback in response to state changes .BlocConsumer  The construction method of is as follows ：

const BlocConsumer({
 Key? key,
 required this.builder,
 required this.listener,
 this.bloc,
 this.buildWhen,
 this.listenWhen,
}) : super(key: key);


The parameters are as follows ：

• builder
  ： Responsive component construction method , and  
  BlocBuilder
    In the same .

• listener
  ： Status change processing listening callback function , and  
  BlocListener
    The definitions are the same .

• bloc
  ： Optional  
  Bloc
    State object , If not specified , Automatically from the current
  BuildContext
    Find the corresponding type of status object in .

• buildWhen
  ： Optional parameters , Status objects before and after receiving , You can return... According to the previous and subsequent status objects  
  bool
    value , if  
  true
    Will refresh the component .

• listenWhen
  ： Optional parameters , Status objects before and after receiving , You can return... According to the previous and subsequent status objects  
  bool
    value , if  
  true
    Will call  
  listener
    The callback method .

Look again.

BlocConsumer

Of  

builder

  Method ：

@override
Widget build(BuildContext context) {
 if (widget.bloc == null) context.select<B, int>(identityHashCode);
 return BlocBuilder<B, S>(
 bloc: _bloc,
 builder: widget.builder,
 buildWhen: (previous, current) {
 if (widget.listenWhen?.call(previous, current) ?? true) {
 widget.listener(context, current);
 }
 return widget.buildWhen?.call(previous, current) ?? true;
 },
 );
}


You can see , The actual implementation is based on  

BlocBuilder

  Realization , And in the  

BlocBuilder

  Of  

builderWhen

  in , Will be based on  

listenWhen

  To determine whether to call  

listener

  The callback method , So that  

BlocBuilder

and

BlocListener

  The aggregation of .

BlocConsumer  application

We modified the code of the previous article , Then take a look at the comparison of the two parts of the code , As shown in the figure below .

You can see , The number of lines of code has not changed much , But the hierarchy of the whole code will be clearer , This makes the code easier to maintain , The complete code has been uploaded to ：

BLoC  Status management code

.

summary

This article introduces  

BlocConsumer

  Implementation mechanism , And compared  

BlocBuilder

  and

BlocListener

Differences in separate implementations . Through comparison, we can see ,

BlocConsumer

  This kind of aggregation  

BlocBuilder

  and  

BlocListener

  In this scenario, the code level is clearer , It's also easy to maintain .