Cubit has been merged with BLoC in flutter_bloc v6.0.0
What do I mean?
Well, hello again in another exciting article and this time is about a major updates that have been done in the last few weeks and I’ve been busy to write an article or demo about it.
Enough talking and let’s see what Felix Angelov (creator of bloc) did in the flutter_bloc v6.0.0.
Now, as we all know that there is a state management library called flutter_cubit by the same create of the bloc and been widely used by many flutter developers and it has its own approach if controlling and managing the state using dart streams.
What happened is that Angelov merged this library with the flutter_bloc in the v6.0.0 so you can easily use both of them with some changes to the widgets, the way we use it and more.
Lest build a simple demo with cubit and bloc
I’ll assume that you already worked with the bloc library before since I’ll not cover it now but you can read my previous article about bloc state management.
Now firstly, you need to install the latest version of the flutter_bloc which is right now v6.0.1
Then make sure that you’ve already installed the vs code bloc extension since I’m gonna use it for creating the blocs and cubits files and it’s officially provided by Angelov guy.
Coding
After creating the futter app and setting up all the things we need, let see how I organized the structure of the folders
Each bloc can solve a big problem and be smallest as we can, so here we have the Blocs folder that contains all the blocs we write and as you can see we only have one bloc or cubit called (user_cubit).
Also the Blocs folder contains other files (blocs.dart) which export all the main blocs in one import file and (providers.dart) which contains the following
This list of BlocProvider will be used later in the main.dart when using the MultiBlocProvider and I’ll show you a bit more here
Let’s explain the user_cubit and user_state
The user_state contains the states we emit when calling a specific method inside the cubit and here we have a common property called (status) that will hold a String value then passed to the abstracted class.
The user_cubit contains tow different files (user_cubit, user_states) and since the Cubit doesn’t has any events, we only write our methods inside the cubit file and will be called directly later to emits any state we specify.
The user_cubit extends the Cubit class of type UserState and pass the initial state to the super class constructor.
then, we start writing our methods so we can call them inside the presentation layer or the UI.
and each method emits a state that will be listened to build a specific widget later.
The UI
In the UI, we need to build 3 buttons to call each method we wrote earlier in the user_cubit and as shown below
As you can see above, we some column, row, raised buttons and text all together written in the buildBody method which used in the scaffold body.
And we’re calling the methods (createUser, updateUser….) directly using the BlocProvider of the same type which is the UserCubit.
below we have a text that will listen to any states emitted by the user and rebuild its child with the new state and calling the status property.
Testing
Once we click at any button, it will call the method then emit the specified state and widget rebuilt with the new state and data.
You can do much better with the flutter bloc library and this merging is really awesome since now we can do both in one single library.
I really hope I covered simple stuff about all of it, and you got the idea behind all the new things around.
As always.. DO FLUTTER things and BLOC it.
