Flutter – Bloc to Bloc communication for improved state management

Flutter has many options for state management, and Bloc is one of the popular and recommended state management options we have. While deep-diving into Bloc, we will surely require a bloc to be communicating with other blocs to traverse data and reduce new bloc creation.

This feature called Bloc to Bloc Communication has been already provided with flutter_bloc package that we use for our Flutter Projects. Giving details at a high level, it’s a concept where, based on a state of a bloc, we can trigger events or get work from a connected bloc directly. So, Let’s get dive into it.

We will understand this feature by creating one example of a list of items. From one bloc an item will be created and in the second bloc, we’ll fetch and display items added now. The list we’ll maintain in the listing bloc.

First, Bloc for creating a list item will look like the below.

We have just created a bloc for creating a single item and created item will be passed to success state. For real app scenario, this will be through api calls.

After Success of creating an item, we have just simply yield the stage named CreateListItemSuccess(item: event.item), the state takes just the item that was just created.

Now real magic will happen in second bloc, where after creating an item, we list out all items that has been created by CreateListBloc.

In ListBloc, we will communicate with the CreateListBloc to manage all created items in a local variable and emit updated list state from ListBloc to UI to represent updated item list.

Basically, in ListBloc we have an instance of CreateListBloc and stream subscription, which will be listening to the emitting states of the CreateListBloc. As the listening state is done in constructor itself it will start listening while ListBloc instance is created.

For managing list of items, we can see that we have created one list in ListBloc as below,

List<ListItem> itemsList = [];

When CreateListBloc emit, updated state titled CreateListItemSuccess, subscribed stream will get this updated information and based on updated state and parameter values we receive, we’ll updated itemList with new value. For a key note, this can be managed via singleton also.

Once we’ve added new item into list, we can add an event named GetListItems with itemsList to ListBloc for further processing.

Next, based on added event, mapEventToState sense incoming event with data/information and emit new state titled ListSuccess with updated data.

Now, Let’s cover from UI part.

As we can see, we have created ListingPage to provide blocs to the ListingScreen & we have used MultiBlocProvider to do so.

In above code, we have one list to represent all list items. For adding new item in list, we’ve FloatingActionButton and with its onPressed parameter we’ll add CreateListItemEvent event to CreateListBloc. On the success of added new item, a snackbar will be displayed. This has been achieved using BlocListener widget. (For a note: BlocListener will used to trigger any new thing while BlocBuilder used to return UI based on updated states)

To give proper understanding of flow of communication, we’ve added few delayed for adding new event and emitting new state at some place.

Here, we came to the end of this Flutter – Bloc-to-Bloc Communication article. We hope readers have get new concept and things to learn today. Try out this concept, with some cool example to break down this concept more in detail. Stay tuned for future articles. Till then Peace ☮️.