Flutter BLoC

Published in

FlutterFly

4 min readJul 27, 2020

If you are looking into this article than you must be a beginner with little experience and knowledge about Flutter and dart. The Topic for this blog is very common when you are developing an application and wanted to manage states of your application. So let’s get started

What is BLoC and why use it?

BLoC is an abbreviation of the Business Logic Component. It is a state management system in Flutter which was introduced by Google at Google I/O 2018. So here in BLoC, we will be using a few terms, mostly like Stream and Sink. We will talk about these two later but the second question was Why to use BLoC, and the answer is because it can manage the state of the whole application from a central place. And as earlier methods that were used to manage state was not suitable for large applications.

What are Sink and Stream?

Sink

By the above-given Image, It is clearly seen that sink is something that is given as Input into mainstream.

Stream

The stream is something that provides a way to receive a sequence of events. These events are received by someone who is listening to the stream.

Work Flow of BLoC

Now we have done enough theory and concepts, let’s move on to the next step which is quite exciting that is coding.

Step 1

Make a Class with any name you like, in my case, I am keeping it related to the topic “DemoBloc”. In this class make a StreamController of private type and respect to that stream a getter and follow the below-given syntax.

We are making the StreamController of private type to prevent access from other classes, we will use here Stream getter to access the Stream and only those who are listening to the stream will be able to access all things which are available into the stream. But remember no changes can be made.

Step 2

In the next step, you need to “Dispose” the stream you have created because the stream will last until you manually dispose it from the stream. Follow the snippet given below

Step 3

Now if you have ever used setState to manage the state of your application then you must be aware that we need to perform some sort of tasks to get a response from JSON and to store it, here is the link if you don’t know.

In BLoC we do all those things except using setState, So what we need to do next is create a class that contains the data from the network request.

Step 4

We need to convert the response received from JSON and wrap it into a class

Step 5

Here comes the most awaited part of the topic, showing data on the user interface, So let's do it

Make a method say, “getData” and object of the class you have made to convert JSON and by calling the class to receive data and store it into a variable, here “data” is the variable.
Here I am checking that if the list we got from JSON is very long then how many items are to be displayed on the screen.
Now add this data into the stream by sinking it, so that the listeners can receive data from the stream.

Step 6

Now come to UI i.e “main.dart” code to integrate things we have done previously.

So here we need to receive data from the stream, to achieve this we will create a List in which we will store the data received from JSON and an instance of the class where we have made the StreamController.
Get data from the Stream by calling “getData()” function.
Dispose the Stream.
Make a list because we are trying to fetch the list from JSON
Wrap this list by ListView.builder so that the list can be made
Wrap this list by StreamBuilder widget and make it listen to the stream, and if it gets data from Stream, then save it into the list.

Follow the below-given code to perform and understand the implementation.

GoodBye

Thanks for reading. If you found this article to be helpful please share it with your friends and if you found any mistake or error ping me on my LinkedIn.

Complete source code link.

For more about flutter, follow me, so you’ll get notified when I write new posts.