simple BLoC, simply explained

Flutter being a new framework has no generally accepted architecture to manage your state. Which is a good thing, and also a bad thing. From searching and looking through different state managements, I found out the BLoC using Streams and Sinks is the best one to implement, in my opinion. So here is me, explaining what is BLoC, in simple terms .

BLoC means business logic, or I would say ‘what user are able to do’ logic. User is able to login with Facebook, Google, e-mail or user able to add a picture and edit it. Thus, all of these are business logic.It encodes the part of the app with business rules that determine how data can be created, stored, deleted and updated. Imagine the cook in the restaurant, it processes your order from the waiter/waitress and converts your order into actual food. Wait the restaurant is a good analogy to explain BLoC, I am gonna use it.

It is different to the app logic, which holds the logic in built in the app. The food is already prepared, but how are we gonna represent it? On a plate, in a bowl, on a cup? I would say it’s the UI/UX side of the logic.

Instead of having the app logic and the business logic in one file (which can get messy and huge), we create layers, to separate the business logic and the UI/UX code, which makes code way cleaner and pleasant. Thus, instead of you being the cook and waiter, at the same time, you hire a cook to cook (cos I can’t cook for nuts) for you and I will be the waiter. Therefore, each person have their own specific roles, which makes the data flow and execution, better.

Thus, you can separate your business logic in a bloc file. Here is an example: Let’s create a bloc called RestaurantBloc. In a BLoC, you will have streams and sinks. Just think as streams are output and the sink are inputs. The one that controls this is, you guessed it, a controller. A streamController to be exact.

This is a basic example of how I usually create a simple BLoC file. In the restaurant BLoC, there is the waiter and the chef in it. They are both stream controller and they have to work together. This is how it flows:

1. The chef will be listening to the order that is given by listening to any orders(events) through the stream (from the widgets).
2. Once it is given a customerOrder, he will then proceed to cookOrder and place the cookedFood on the tray (sink of waiter).
3. Then the waiter would get the tray and stream it to the necessary customers (widgets).
4. Once the restaurant is not needed, we can ask the people to stop working and listening to orders, by telling them to stop (dispose method).

There is modifications and additions you could do in this bloc:

1. Manipulate the cookedFood (data)
2. Store the cookedFood for future events
3. And many more!

Explaining this concept using this restaurant and food analogy is making me hungry…

I am not going to explain on how to implement, what’s the best implementation for bloc and such, because there are a lot of tutorials on how to create and what not. This is me explaining what is a simple bloc, for a simple person. If you are looking on how to implement bloc in you app, fret not!

These examples below are so far the best from the many content out there, on how you can implement the bloc:

1. Beginner: Flutter BLoC from Scratch (Reso Coder)

Highly recommend this when you are starting out in learning bloc

2. Intermediate: Github Search BLoC example (Brian Egan)

You’ll learn RxDart and events and state. Simple and clean example

3. Advanced: Practical use of BLoC (Didier Boelens)

A lil complicated but very good explanation. And practical use case

If you have good examples to share, please comment down below! Sharing is caring. That’s it for me. Thank you for reading and have a nice day!

If I have explained anything wrongly, apologies and do comment down below. Thanks!