Flutter bloc

Elvis Salabarria
4 min readApr 19, 2022

--

What is Flutter Bloc?

Flutter bloc is one of the state handlers that can be used for flutter app development. Recommended for maintaining easy management of all states throughout your application.

The excellent documentation that this library presents makes it possible for you not to have to be an expert on this subject, since it has a relatively easy learning curve for any developer to understand, even if you are a beginner.

If you want to cover a little more about this lib I leave you the link of the official package so you can check it more carefully

flutter_bloc: ^8.0.1

For the development of this article I have used two fundamental packages, one called dio and the flutter bloc itself.

Dio is nothing more than a package that allows the app to communicate with a server.

As the main objective of this article is to work with a block, I leave the link of Dio for a later consultation

Link Dio

So let’s start with the example

On a large scale, the operation of bloc is comprised of events and states. As the name says, we are going to use the events to perform an action (in this case, we will make a request to a public api), then we will wait for the response from the server to issue a state that will be in charge of updating our view.

As the image shows, in this class I am going to declare each one of the states that my block can go through, the GetFilmsSate emits a list of movies, as well as the ErrorGetFilmsState we will take it to emit if an error occurred.

In this class we are going to declare each of the events of our app.

In this class we are going to define each of the methods that our app will have for the block to use, for example the getFilms() method will be in charge of making the request to the server to obtain a list of movies.

As you can see, there is a FilmResults model class that is used to map the API response.

This class is in charge of carrying out everything related to the emission of the states, it is worth clarifying that in this example we have 3 main states, a HomeInitial() that we will use to show a widget that defines how a processing is being carried out in the second plane, the GetFilmsState() which is in charge of notifying the view of the response that was obtained from the server and an ErrorGetFilmsState() which, as the name says, we are going to use it to emit an error state.

After having each of the files, we define in the view the behavior to use bloc.

With this example we are declaring that the HomeScreen class will be using a pad.

In this class we define the method that will be in charge of calling the event, this method is called getFilms(). In this case we make use of it in the initState because we want that since the view is accessed, we look for the list of movies on the server.

The build method is composed of a listener because we will be listening to each of the states, then as the body of the main widget we perform a validation to display an informative message (in case the state is HomeInitial()) or we pass directly to form the widget that will be responsible for displaying the list of movies.

If you want to go deeper into the subject, consult the example prepared on github for a better understanding.

--

--