Flutter BLoC: managing the state of primary data types

Question

I am developing a mobile application using Flutter. I am new to Flutter. I am using BLoC for state management. I know that it is specially designed for management async execution. But also the purpose of BLoC is for state management. But I am a little bit confused and not quite sure how to handle the primary data types in BLoC.

Let's imaging the I have a button and an image. The functionality would be that when the button is clicked, the visibility of the image will be toggled. Literally, we just need to use a boolean variable to manage the state of the image. This is how I would implement it.

I have a bloc class called HomeBloc with the following implementation.

class HomeBloc {
  bool _isImageDisplayed = true;
  bool get isImageDisplayed => _isImageDisplayed;
  void set isImageDisplayed(bool displayed) {
     this._isImageDisplayed = displayed;
  }   

  //the rest of the code for other functionalities goes here
}

final homeBloc = HomeBloc();

Then in the HomePage widget, I update the state of the image like this inside the setState method when the button is clicked.

 this.setState(() {        
     homeBloc.isImageDisplayed = false;
 });

My question is that "is it the standard way to manage primary data type in the BLoC in Flutter"? Is this the best practice? Do we need to use StreamBuilder? Do we even need to manage it inside the BLoC?

Answer 1

It's not the best practice I guess, as using setState becomes really hard on big applications and re-rendering widgets that don't change for no reason. Imagine making an e-commerce app and you just go to the product page, you add the product you like into the cart, but you have designed in your home page a cart icon with a red dot with a number inside it to specify how much products you got in your cart, so you handle the state of that icon in the main.dart file by passing a function that setState the home page route or maybe the whole application, it's hard, isn't it?.

Thankfully, BLoC and Provider patterns are basically using setState but in a better way so you don't have to re-render the whole page just for a small change in a text or something else, but you just re-render a specific widget in your widget tree.

I also recommend using BLoC Provider which is built on Provider and RxDart (Streams) as it makes great isolation between UI code and business code.

Check Provider and BLoC Provider .