app state in Flutter | flutter_bloc

Every developer building a mobile application sooner or later starts to be interested in app state management. Initially, this may seem challenging, but later it becomes an indispensable part of creating a mobile application. It should be this way because if there is no common state in the development of a mobile application, then it becomes impossible to organize, manage, expand, and use it.

Flutter has many ways of managing app state, such as Provider, Mobx, Redux, Bloc, GetX, etc. Among them, Bloc has become the most famous.

When we start using Bloc, one of the first questions that arises is what is the difference between Bloc and Cubit and when to use each of them.

Bloc

To use Bloc, we need to create at least 3 classes. Bloc itself, State, and Event. To make any changes in this bloc from the UI, we send an event to the Bloc, which calls the event method defined in the Bloc, performs an operation, and when the method is called, we record a new state in the emit method, which reflects the changes in the UI. The syntax is roughly as follows:

BlocProvider.of<MyBloc>(context).add(ChangeColorEvent(Colors.red));

Here, we send the ChangeColorEvent event to the MyBloc Bloc and pass the color Colors.red for the bloc to pass the new red color to its state. We don't get a result from the called event, and the changes are captured directly in BlocBuilder or BlocConsumer.

But what if we need that after the change in Bloc, based on the result of the operation, we also need to call another Bloc or an internal method? For example, if we use a Bloc that doesn't affect the current page but affects the page below the current one, and depending on the result of the called event in the Bloc, we must decide whether to return to the previous page. If we continue to use Bloc, we can hold this with BlocListener. Then the sequence will be as follows: we call the event, record the result in the state, and then look at the result using BlocListener. However, let's agree that calling a method in one place and waiting for the result in another is not right, and in a mobile application, if even a little such situations happen (and such situations happen very often), everything will become very confusing. So, we move on to Cubit.

Cubit

The syntax and structure between Cubit and Bloc are different, but the principle of operation is the same. We need to create only 2 classes instead of 3. Cubit and State. The UI remains unchanged. To perform any operation in Cubit, we simply call the method defined within it. Roughly like this:

BlocProvider.of<MyCubit>(context).changeColor(Colors.red);

Here, we simply call the changeColor method in the MyCubit Cubit and pass the color. We can get the result of the called method in the usual way. For example.

bool isChanged = BlocProvider.of<MyCubit>.changeColor(Colors.red);

if(isChanged){
  Navigator.pop(context);
} else {
  _showErrorDialog();
}

Here, we tell Cubit to change the color, and if the change is successful, we return to the previous page, otherwise, we show an error dialog.

The difference between Bloc and Cubit does not affect performance, so the choice between them depends on how they are used in specific situations. However, most people use Cubit because its usage is simple, convenient, and understandable. Moreover, Cubit has everything that Bloc has.

Connecting Bloc and Cubit to the application can be done as follows.

void main() async {
  runApp(MultiBlocProvider(
        providers: [
          BlocProvider.value(value: FirstCubit()),
          BlocProvider.value(value: SecondCubit()),
        ],
        child: MyApp(),
      ));
}

Thus, when we connect Bloc or Cubit in this way, this Bloc or Cubit will be active throughout the application. However, there may be a situation where the block should only be used for one page, and after entering the page, the block should be reset. This can be done as follows.

Navifor.of(context).push(CupertinoPageRoute(builder: (context) => BlocProvider.value(
      value: FirstCubit(),
      child: FirstPage(),
    )));

We simply assign FirstCubit to the FirstPage page when we enter this page, and we can use BlocBuilder inside this page.

Thus, we briefly discussed the difference between Bloc and Cubit and their inclusion in the application. You can read more about it here.