There tons of tutorials to learn bloc out there. Not that they are bad, there are problems with the steps. What to learn first and what to learn next.
State mamagement itself is a new concept for many beginners. Let alone BLoC or other state management.
But bloc is very difficult to learn for beginners. So I would suggest learn Getx or Provider first. Then slowly move to BLoC.
This way you would know how state management works and the basic principle of it.
Personally I started Flutter state management with Getx. Once I learned a bit about Getx then switching to BLoC or Provider was much easier.
Actually I use both at work. Getx is great for Productivity and BLoC is great for learning better concepts about flutter framework itself. Check out here how to use Getx and BLoC together in one app.
Now comes to BLoC itself.
Actually you should start with Cubit of BLoC. Cubit is subset of BLoC, which makes it easy to understand and start with.
Cubit hides the idea of events, which BLoC uses. They both share the idea of emitting states.
So first learn Getx
In Getx you will encounter an idea name GetBuilder(). We use it wrap arround a widget, that should be rebuild.
In BLoc we will use kind of same idea, but instead of calling it GetBuilder() we call it BlocBuilder(). Of course, there are other differences between GetBuilder() and BlocBuilder().
Second learn Provider (optional)
Here one concept that's similar as Bloc is Provider.of<YourCustomProviderType>.
At this point you will also find similarities between Provider State Management and Getx.
Like Getx GetBuilder() and Provider Consumer() Widgets do the same thing. Their syntaxes are very similar. You will also see that Getx uses update() method and Provider uses notifyListener() method to tell the widget about updated states.
Next learn BLoC(Cubit)
As you learn about Cubit, you will come in touch with emit() and state, like this kind of ideas. The same idea is used in BLoC package.
In Cubit we will the below terms, that would be used in BLoC as well.
1. BlocProvider<YourCustomCubitClass> ;
2. BlocBuilder<YourCustomCubitClass, YourCubitStates>
We will see that above same syntax is used for BLoC Library
Cubit's entry point in the app state management is same as BLoC. Here I mean dependency injection and creating actual Cubit.
MultiBlocProvider(
providers: [
BlocProvider<WorkoutsCubit>(create: (BuildContext context) {
WorkoutsCubit workoutsCubit = WorkoutsCubit();
if (workoutsCubit.state.isEmpty){
workoutsCubit.getWorkouts();
}else{
print("...states are not empty..");
}
return workoutsCubit;
}),
BlocProvider<WorkoutCubit>(
create: (BuildContext context) => WorkoutCubit()),
],
child: Scaffold(body: BlocBuilder<WorkoutsCubit, List<Workout>>(
builder: (context, state) {
if(state.isNotEmpty){
print("..loaded..");
return const Center(child:Text("Loaded"));
}else if(state.isEmpty){
print("..loading..");
return const Center(child:Text("Loading..."));
}
return const SizedBox();
})))The same code structure you would use for dependency injection in BLoc.
Learn actual BLoC
All the above concepts like BlocProvider, BlocBuilder, emit and used in BLoC itself.
BLoC introduces events which Cubit does not have. Events include callback function which could be called from the UI.
In general inside events we will emit() states. So emit() function is more the update() or notifyListener() method we have seen before.
The thumbnail of the above video should give you better picture how BLoC works.
