BLoC: Best state management using in Flutter 💙

Are you ready, Here we go 🚀

Wwhat is the BLoC and Cubit?

BLoC: Business Logic Components: It is one of the strongest, best and most popular State Management specially with companies
The reason is: the UI and business logic are separated in a very clear way (this reason it isn’t recommended to handle with small applications) and also the presence of giant sponsors contributting to its development and improvement, the most important of which is the Stream company that specializes in communication & the official sponsor of Flutter Chat
Official sponsors of BLOC:

BLoC Sponser’s

The BLoC is not considered a type of state management, but is also considered:

- Design pattern

- Architecture Pattern

In another way, I’ve Cubit

Cubit: it’s a part of BLoC, but in simple, easy to use state management solution following the principles of BLoC pattern, and lightwight

if we need to implement between BLoC and cubit, we’ll talk:

BLoC consists of cubits

Aadvantages

- Speed

- Power

- Easier to test

- Readable

Ddisadvantages:

- Complex and large

- it takes a long time to handle it in the app

Let’s to talk about BLoC and Cubit in discrete:

Cin Cubit:

- Request Operation: (function, but isn’t stream components), here, I request the data from database or server

- Response Operation: (state stream components), The cubit here will returned for me the data I requested it

Cubit art structure

Bin BLoC:

- Request Operation: (events stream components), here, I request the data from database or server

- Response Operation: (state stream components), The BLoC here will returned for me the data I requested it

BLoC art structure

Stream Components: is a fundamental component that represents a sequence of asynchronous events. It can be used to handle asynchronous data and facilitate communication between different parts of an apps

Will, what is the difference between the two pictures 🤔?!

- in the concept to the text

What do you gain from the above?

• The Cubit is part of the BLoC But the opposite is not true (Cubit is subclass “Subset” from Bloc) This evidence is the same as what I do in Cubit I do in Bloc, except that they share the same goal, which is to separate the UI from the Logic & Data, and if you notice I also have different names, but they Exactly the same purpose and the same function, in addition to the fact that the block is more comprehensive than Cubit, larger and deeper, and the last note is that Cubit is similar to BloC, but on a small image of it (I remember this image that the cubit is a small part of the bloc)

Sso, the question now:
- What is the difference between BLoC & Cubit?

• Cubit is simpler than BLoC in terms of use
• The concept of the BLoC is greater than the concept of the Cubit, as it’s the superclass that is inherited from the Cubit
• The Cubit plays the role of complementing the BLoC (in some projects I use it), where the Cubit is used to store states due to its lack of function, and it’s possible to use them together in a few cases (not always)
• As I told you, (in the explanation) in the Cubit, when I send a function, it’ll reply to me with a state stream, while in the BLoC, I send an event stream to receive the state stream, and this is better for me.

Cubit is a subset from BLoC

Take an example of this

1- I’ve 3 Buttons and each button has a CRUD command (delete , update, create, & read data)

If I use Cubit:

• I’ll create for 1 button the 1 state & function and let the function send (follow) the logic or method of the buttons (let it be the delete button) I’ll let it automatically return to the stream that is done for the delete button, which is showDeleteMessage and inside it is a message that receives a message that the element has been deleted

If I use BLoC:

• I’ll create a for 1 button the 1 state and event, & I’ll let the event send (followed) the stream of the logic or the method of the button (let it be the delete button). showDeleteMessage with a message that receives a message that the item has been deleted

2- If I want to search for a weather today in a country, I’ve a function called showLocation() inside the parameter. I’ll let it enter the name of the city or country, so that it can tell me what the weather is doing there. Let me enter: (Cairo) and it’ll show me today’s weather on the screen. There are no problems:

If I use Cubit:

• It’s possible that when I enter the first two letters of Cairo (like this, Ca), I can automatically find the data of Canada or Cairo (the weather of two countries is printed by virtue of their beginning, Ca), Do you know why?! Because the cubit sent what I wrote as a function, so it’ll return to me as a stream. it’ll return to me, but it isn’t updating (data retrieval will be slower in terms of time)

If I use BLoC:-

• Here I search for the full name and it waits for me until I finish the search and I sell it as a portable event in a stream for the data to get me a state called showAnimationLoading then comes the name of the region I searched for

I’ve some terms you should know it:

• event: When I press the button, what I’ll do (change size or color, move on screen, answer or upload data, …).
• state: This is the state of the event that happened a while ago, and we have 3 months of the state, which are: Loading, Success, Error, so that I store values in them that I can control.
• emit: This is the definition of the state that is inside the original state, and we know it inside the Cubit or the BLoC of the methods to return it and use it when I implement it “it’s like return in his doing”.
• observer: here we use this term for monitoring “tracking cases”.
• listener: listening for the state of executing a specific function (transition, display, …)
• builder: Building on the screen
• provider: provides a specific service according to the state management of the widget, and in it’s a MultiProvider that collects all the services used in the all app widget

Note: You should install this plugin in your code editor (VS Code, Android studio, intelliji, …)

BLoC and Cubit plugin

It can help you to split files, & write BLoC and Cubit functions and line, It saves your time ⌛

Let’s to talk about the VIW (Very Important Widgets) using in BLoC and Cubit:

1- Bloc Consumer:

• The use of 2*1 means that it contains 2 widgets to use to shorten the code and keep it more organized, it contains:

a) Bloc Builder:

• Using to build my screen directly and make it configured to hear the cases and accordingly return the data inside the screen

Bloc Builder

b) Bloc Listener:

• Executing operations not on my screen directly, but secondary operations beside the basic operations on the screen, such as navigations to the screen that carries my data

Bloc Listener

After you got to know Bloc Builder and Bloc Listener each other separately, now, It’s time to know how they came together under a name: Bloc Consumer, It makes me instead of being restricted to Bloc Builder or Bloc Listener in handling the states of the UI, here I’ll use it as often as I want “more than once”, I’ll build the UI & action states on the UI at the same time and more than once:

Bloc Consumer

Note:

• You can work without the BlocConsumer and run a completely normal BlocBuilder instead, But you won’t be able to listen to the events for the decision to be taken “BlocListener”

2- Bloc Provider:

• Use it to initialize your BLoC and Cubit inside the UI, in another mean: the screen should be ready that it’ll receive the changes (states, events) defined inside the cubit or bloc to call (implement) them inside the class

Bloc Provider

Note:

• Let the BlocProvider wrap the entire screen so that all the widgets inside the screen have the same states & event and you can use the BLoC or Cubit when creating an object from it
• One of the most important methods that you will use inside Cubit is: appInitial, becouse the BlocProvider starts the process of creating the BLoC or Cubit there.
• You can work without the BlocProvider, and maybe not (depending on the UI), You can make a normal MultiBlocProvider & set the UI build on BlocBuilder or BlocConsumer.

3- MultiBlocProvider:

• It’s wrapping on widget in the home parameter inside the MaterialApp or on the MaterialApp itself, in order to collect all the BLoC or Cubit that’re in the app in this place in this way:

Multi Bloc Provider

4- BlocObserver:

• Using to order to monitor the events that happen in the app, it’s important in order to see the cases that worked & what happened inside the app, & to identify errors and fix them.
• You can take it from (here) & create a file for it to implement it in void main(){} like this: Bloc.observer = MyBlocObserver();