What is BLoC Pattern?

Get a detailed understanding of BLoC patterns and application layers.

As mentioned before, BLoC is an abbreviation for Business Logic Components. But what is a Business Logic Component?

The idea behind BLoC is that everything in the app should be represented as a stream of events. Widgets fire events and get responses. BLoC handles stream flow as a go-between based on the logic we specify. In other words, it’s a component that handles the business logic.

The best part about the BLoC architecture is that we don’t need to import any libraries or learn any new syntax to build it. The implementation relies on the streams that the Dart programming language provides.

How is BLoC different from other state management techniques?

Press + to interact
The three layers of an application and how they interact together
The three layers of an application and how they interact together

A typical application has three layers: data, business logic, and user interface (UI). The widgets in our application make up the UI layer. The data layer houses the information that our application needs to display to the user to be relevant; this information may come directly from a database or an API. The layer that links the data layer and the UI layer is the business logic layer. It makes any calculations required in the middle and provides the data to the UI layer in an understandable way.

Press + to interact
Illustration of how the BLoC layer connects the UI layer and the data layer
Illustration of how the BLoC layer connects the UI layer and the data layer

Let’s use an e-commerce application, as in the illustration above. The interface that displays a list of available goods for purchase to the user is the UI layer. The functions that call the API to get the user’s list of available products are contained in the data layer. After making the necessary adjustments to the data so that the UI can make better use of it, the business logic layer sends the updated data to the UI layer. These necessary adjustments might involve deleting extra data that the UI layer won’t display. The data may also need to be formatted to meet UI requirements—for example, changing the price of a product in an e-commerce app from a float to a string that includes the currency.

Press + to interact
// assume we got this from an API
double price = 9.99;
// changing the formatting of the data
String formattedPrice = "$" + price.toString();
return formattedPrice;

Each of these layers should be implemented entirely independently from the others. The code will be difficult to read and debug if these three layers are tightly coupled together. This is where the BLoC pattern comes in place.

The BLoC pattern is a reactive programming model that works well with Flutter since its widgets are designed to adapt reactively to changes in business logic.

Furthermore, BLoC can be used for dependency injection. Dependency injection is used when an application has to rely on a specific object to update the UI. Other state management libraries, such as Provider, rely entirely on dependency injection for state management. In BLoC, on the other hand, we get to pick the architecture that best fits our use case. The very definition of flexibility!

Finally, BLoC works well in large-scale applications. Compared to alternative state management solutions, it provides the most readable code and has the most efficient architecture. This makes the code stable and easy to test and fix if it crashes.