Flutter BLoC for beginners

Introduction

In this article we will be talking about Bloc: what is Bloc, why to use Bloc, and how does it work. Without more hesitation, let’s start and dig in.

What is Bloc

Bloc stands for Business Logic Components; it aims to separate the application’s business logic from User Interface, making the application code more unambiguous, scalable, and testable. Bloc is a statement management widely used in Flutter. Bloc has many advantages, but one of it’s main advantage is that it enables us to easily implement the Single responsibility principle from SOLID principles.

Using Bloc, we can easily separate the application into multiple layers, first we would have the presentation layer which would contain the UI/Views/widgets, then the business logic layer (Bloc) which will take care about the state changes and will have a dependency on the data access layer.

The data access layer will be the last layer in the application, it can contain a repository class which will act as an abstract class above the data access object classes.

Why to use BLoC

Let’s examine some of the pros and cons of the bloc design pattern.

Pros of Using Bloc

• Excellent documentation about different scenarios.
• Separates business logic from the UI hence making the code easy to understand.
• Makes the product more testable.
• Easy to keep track of states an app went through.

Cons of Using Bloc

• The learning curve is a bit steep.
• Not recommended for simple applications
• More boilerplate code, but that can be taken care of by extensions.

How does Bloc work

Initial Set Up

Make sure to install the bloc extension in your editor; it will help create all boilerplate code and files required for the project. You can follow these instructions.

Bloc

The main idea is that the UI will send events to the Bloc, which will then send the requests to the data layer. Then the data layer will return a response and the Bloc will trigger state changes.

To understand how bloc works, we need to know what are events and states.

• Events: events are an application’s inputs (like button_press to load images, text inputs, or any other user input that our app may hope to receive).
• States: States are simply the application’s state, which can be changed in response to the event received.

Bloc manages these events and states, i.e., it takes a stream of Events and transforms them into a stream of States as output.

Bloc example flow

Consider an application with some UI, a Bloc component and a data layer where the data is hosted.

In Bloc terminology we can consider, as we seen before, that any action on the screen that can change the UI is called “event”.

The UI sends events to the Bloc as an input upon every user action, then Bloc processes the event and requests some data from the data layer in order to process the event further. That data is then send to the Bloc, and then Bloc after applying bussiness logic produces a new state.

Afterwards, the Bloc sends the new state to the UI and upon receiving the new state the UI gets rerendered.

Let’s see a practical example:

Suppose you have an application in which the user can type a word and it gets an image of that word.

Flow: user types “dog” → user clicks “search” → image of a dog appears

When user search image, then the UI sends the search image event to the Bloc, along with some additional information, for example: ImageToDownLoad = “dog”. Bloc then, analyses the event and recognises that an image of a dog needs to be downloaded from the data. Then, request the data layer for the “dog” image. Once the requested data (dog image) is provided to the Bloc, then Bloc produces a new state and on receiving this new state, the UI gets rerenders with the new state value.

Now, let’s understand what happen inside the Bloc to be able to manage this new state:

The main actor on the Bloc is the stream. A stream is a continuous asynchronous flow of data and while the life span of the stream the data keep on flowing. The point where we can add the data to the stream is called sink, whereas the point on where we consume the data is called source of the stream. In the example flow explained below as well as in Bloc in general, we can recognise two streams; one is for events and the other is for states.

The events keep coming from the events stream, then the Bloc analyses the event, gets relative data and applies business logic to produce the new state. The sink of the event stream is in the UI layer, because it is from there where we add events to the event stream. The source of the event component is in the Bloc. The same way, the sink of the state stream is in the Bloc, because it is from the Bloc were we add the new state to the stream of state. The source of the state stream is in the UI layer so that we can observe the new state and render the UI accordingly.

I hope with this introduction and practical example it is more clear the flow of Bloc.

If you found this article useful, please consider buying me a coffee 🥺👉👈 or please Clap if you learned something new today .Thanks in advance.

For any queries feel free to reach out to me .