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

Preface

In the last article Flutter Introduction and actual combat （ eighty-nine ）： Use BlocListener Processing state changes , 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 .

Code pair

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 .