Flutter Bloc : A Complete Guide to State Management in Flutter

In this article, I am going to explain about Bloc. Bloc is not just a state management, but it's also an architectural design pattern which helps us to build production-level applications.

• What is Bloc and its Architecture? 
• What is BlocBuilder, 
• BlocProvider,
• BlocListener, 
• BlocConsumer, 
• RepositoryProvider? 
• Folder Structure For Bloc

Intro

When it comes to building an application, 

Flutter is the easiest and powerful framework.

But building an application without any strong architecture is like building a house without any planning and blueprints.

• You won't understand the uses of architecture when building small applications.

• But when it comes to building a big production level application where you have many screens, animations, methods, classes, etc, without any proper architecture you will end up in a state where everything is messed up and you don't know how all the components, classes, methods are communicating and functioning.

So it is very necessary to maintain the code make code more readable and testable, and easily trackable when designing and developing this kind of big application.

There are many different packages available, and all have their own way to handle application states.

Why bloc?

In this article, I am going to explain about Bloc. Bloc is not just a state management, but it's also an architectural design pattern which helps us to build production-level applications.

..

What is Bloc?

Bloc stands for Business Logic Component.

In computer software, business logic or domain logic is the part of the program that encodes the real-world business rules that determine how data can be created, stored, and changed.

Bloc separates the UI from the business logic. When we build an application without any architecture, we most probably write our logic directly inside the UI. 

But when we use Bloc we have to write the business logic in a separate file, i.e separated from UI and then we link it to the UI.

Bloc makes the application easily testable, fast, reactive.

The Bloc is distinguished into four layers 

• UI (Presentation Layer) 
• Bloc (Business Logic Layer)
• Data Layer (Repo & Data Provider ) 

..

UI (Presentation Layer) :

All the component(Widgets) of the app which is visible to the user is defined here.

Bloc (Business Logic Layer):

It acts as a middle man between UI and Data layer, Bloc takes an event triggered by the user (ex: GetWeatherData button press, Submit form button press, etc) as an input, and responds back to the UI with the relevant state.

Data Layer : 

This layer has further two parts. 

Repository and Data Provider.

• Data Provider - This layer retrieves/fetches the raw data from different data sources (ex: different APIs, DBs, Network, Shared preferences, etc). 

For example: If you are building a weather app. Then you might use external APIs like OpenWeatherAPI, from where you will get raw data. You can have GET, POST, DELETE, etc methods inside this class. For example, To get the raw data from OpenWeatherMap API we can do something like

• Repository - : The repository layer acts as an intermediary between the data sources (such as APIs, databases, or local storage) and the business logic layer. It abstracts away the details of how data is fetched and provides a clean API for the business logic to retrieve data. 

(For ex: converting the raw into some kind of Model). 

Bloc communicates with this layer when the user requests the data. This layer requests raw data from the Data Provider and after that, this layer performs some kind of transformation. 

For example, converting raw weather data to WeatherModel.

This Repository layer directly communicates with bloc in order to pass data

The above figure is showing exactly how every layer is communicating with each other.

There are two very important terms that you need to understand : Event and State.

Event

Event is nothing but different actions (button click, submit, etc) triggered by the user from UI. It contains information about the action and gives it to the Bloc to handle.

State

The UI will update according to the State it receives from the Bloc. For example, there could be different kinds of states

• LoadingState - Will Show Progress Indicator
• LoadedState - Will Show Actual widget with data
• ErrorState - Will show an error that something went wrong.