Before learning what is Fluter BLoC. Have a look at architecture 1 application using BLoC Pattern.

1. What is BLoC Parttern.

If you have been an Android developer, you are probably familiar with two famous architectures, MVP and MVVM, which have been used a lot in recent years. If you look at the diagram above, you can also imagine that BLoC Parttern is almost completely similar to the two architectures mentioned above.

The above diagram shows how data flow from UI to Data layer and vice versa. BLOC does not have any association with Widgets on UI and UI only listens for changes coming from BLOC class.

BLoC is a state management system for Fultter recommended by Google developers . It helps programmers manage the state and data flow in your application. So what does BLoC use to help us do these things?

The answer is “STREAMS” or “REACTIVE” . Generally data is transferred from BLOC to UI or vice versa from UI to BLOC as STREAMS .

Here I will build a small project to get data from the server and display it in the form of a list to help you better understand the mechanism of BLOC.

2. Use BLoC Parttern

In the project creation part, I will not talk in detail here.

• blocs package is where will contain the BLOC implementation code of the application.
• the models package is the place for the models class corresponding to the Json file retrieved from the server.
• resources package where the classes perform the functionality to interact with the server.
• ui package contains UI classes to display on the screen for users.

In addition, here I need to use more RxDart library. Open and add the file pubspec.yaml

Synchronize the library with the Terminal command

After this step you need to make sure you have operated with moviedb . If you do not know this famous database, you can refer to it here

If you do, then the api we need to use is here

http://api.themoviedb.org/3/movie/popular?api_key=your_api_key ”

Enter Api_key and test with Postman, we will get a Json string as follows.

Back to the models package we need to create new classes to convert data from String => Object

Here you pay attention and the function ItemModel.fromJson () it will perform the data conversion from Json => Object with the correct keys.

Now we will be interested in how to get data from the Server and Convert to Object for use. You come back to the resources package , create a movie_api_provider.dart file . and put the following lines of code.

Func fetchMovieList () will do the job you want. But note that it throws an exception if the data retrieval and conversion job fails.

Initialize the Repository to contain the methods provided by MovieApi . Here we only demo 1 api so it is quite redundant, but imagine that in your application there are many Api from many different sources and you need to gather them under a certain Title like UserRepository or MovieRepository . it has quite a lot of effect.

Now comes the most important part of the article. You guys are back with the blocs package

Here, I do not create a PublishSubject, it is responsible for adding data that it receives from the Repository as ItemModel and passing data to the UI as a stream . To do the above work, I create a function fetchAllMovies () with the return type of 1 Observable . (If you do not understand what Observable is, you can refer to RxDart and Observable here )

Looking down the last line, I created a variable to be able to access MoviesBloc .

Now for the last part. Is how to display the data retrieved from the server at the top on the application screen. In the ui package you add a file movie_list.dart

The interesting thing here is that I don’t use StatefulWidget . But instead I use StreamBuilder to do the same job StatefulWidget is to update UI for users.

As above, I have an introduction. The MoviesBloc class will transmit data from the Network with UI in the form of a STREAMS, so to receive the data stream from MoviesBloc , the UI Class needs to use a StreamBuilder to listen to the changes of data and update the user interface. be suitable.

Here StreamBuilder is listening for changes in the data stream returned in the bloc.fetchAllMovies () method . So when data arrives, StreamBuilder will show the user what it got. As you have noticed, the snapshot.data will be the place to receive and keep the ItemModel object and the rest of the work for the programmer is to just get data from it and display the update to the UI.

Above, I have briefly introduced to you the thought, method and operation of BLoC Parttern , STREAMS . This is how you implementation the most basic BLoC Parttern or I just call it implementation bằng tay.

Also you can learn quite a lot of libraries to implement BLoC Parttern support like flutter_bloc . But to use proficiently the above libraries, you need to understand BLoC Parttern , STREAMS. Hope the above article will help you.