Bloc State Management with Easy Approach
In Flutter there are different options for managing states in which one is Bloc Pattern (Business Logic Component) that is one of the most popular state management techniques and recommended by Google as well.
Bloc pattern, as name says, provides you a way to write all the business logic of Flutter application in a separate component called Business Logic Component. Customarily, for every screen of Flutter application, there is one Bloc.
Before going to implement this Bloc pattern state management, let’s first understand the core of Bloc, and what is inside the Bloc component.
Bloc component takes event as input, analyse it inside Bloc, and based on business logic it produces the corresponding state as output.
Think Bloc as a vending machine where you put the money and detail of product you want as input, and vending machine after analyzing and applying logic the business logic, like verifying whether the money is enough for the required item or not, it gives you the item you want as output.
Now, to understand what really Event and State is in Flutter world and to understand the Bloc Component more comprehensively, say we have a very simple Flutter application in which there is just one button, download image button, on which when the user would tap the application would download the image and show on the screen.
In the above picture, which is basically the depiction of Bloc implementation, the event is DownloadPhotoEvent which is given to the Bloc as an input when the user would tap on the download button, and on receiving the event, Bloc would first analyze the event, fetches the event detail that could be like some String field indicating which image to download or anything, and after performing business logic, if any, it would perform relative action, which is in our case requesting from server for an image, and at last produces state DownloadedPhotoState along with state details like file path of the downloaded photo correspond to the DownloadPhotoEvent.
When the user would tap on download button, we will send DownloaPhotoEvent event with the detail, image name to download, Flutter logo in our case, and in return Bloc would return DownloadedPhotoState state with the downloaded image local path, so that we can use it to show on screen.
Note : If you don’t want to know the detail of how Bloc works inside, you can skip the next 5 paragraphs (Not recommended).
Now as we have discussed the basics of Bloc, so, we can now go in to the detail of how Bloc works inside. The main actor inside the Bloc component is Stream that is actually the Continues flow of asynchronous data. You can add data to the stream, and you can listen to the data traveling through it in the same time.
The Point from where you add data to the stream called Sink, and the point from where you listen to the data called Source.
So Basically, Bloc mainly have a Stream in it, and Bloc converts whatever events added to that stream to the stream of corresponding states, and after every new state UI changes accordingly.
Above image is the complete depiction of how Bloc works, one part of te Stream is being used by screen either for inserting new event on user action or to listen new state in order to update the UI. However, the other part of the Stream is being used by Bloc itself either to listen the events that’s coming all the way from screen, or to add new state in result of the event received.
Note : There can be hundreds of events and state added to the Stream in a single Bloc not just one, however, for the sake of simplicity we have considered only one.
Now, let’s quickly implement the Bloc pattern to make simple counter application. We are using flutter_bloc for implementing Bloc pattern.
Above is the project structure and the dependencies to add. flutter_bloc to implement Bloc pattern and equatable to make objects comparable.
Let’s first make the Bloc class for this screen, but, before making Bloc, we need to figure out how many possible Events we can give to the Bloc as input and how many State the Bloc can produce.
There are just two events that can be send to the Bloc, IncreaseCounterValueEvent, and DecreaseCounterValueEvent.
However, there is just one state LatestCounterState.
Below are all the Events for Counter BLoC
Below are all the States for Counter BLoC
Now Let’s make Bloc class for Counter Screen by extending our self made Bloc class to the Bloc Class, and in the type parameter of Bloc class we first have to give the Event base class, and State base class of the Bloc.
As you can see in the above code for Counter Bloc, we have to implement two methods when we extends Bloc class.
- initialState (to inialize first state before any transaction).
- mapEventToState (to map event in to correspond state).
Now let’s see the Screen code. In the below code, we have used BlocBuilder<CounterBloc, CounterBlocState> widget. This part of the screen is source that listens to the state produced, and get rebuilt every time whenever new state is produced. Moreover, we have used BlocProvider.of<CounterBloc>(context) to get the Bloc instance as sink so that we can add event to the Bloc using that instance.
Finally, the below code is for the main.dart. You can see we have used BlocProvider widget to provide the instance of Bloc to the descendant of its child.
Awesome That is all! If you find this article useful and you enjoy reading, and want to learn more then you can head over to my YouTube channel Easy Approach over there you can find over 100 of videos on Flutter.
