Flutter bloc is a great state management library for your dart/ flutter application that will help you to improve your application performance and speed.

This is the second part of the flutter bloc series If you haven’t read the first feel free to check out the first post.

Currently, you are reading

  1. Flutter Bloc-state management library for Dart (1/5)
  2. Flutter Bloc-state management library for Dart (2/5) <=
  3. Flutter Bloc-state management library for Dart (3/5)

Let's get your coffee or ice tea and continue with where we left off last time. So you know what is flutter bloc or at least what flutter bloc does or helps you in your application.

In this post, we will dig a little deeper not too much as I know too much is too bad 😊. So we will not discuss flutter bloc in detail. Feel free to check the flutter bloc plugin yourself if you wish to.

Let's get started with a few things first. There are two ways of implementing flutter bloc in your application which are

  1. Cubit
  2. Bloc

You might have heard these two words while reading some blog or in the bloc library or in some example. Don’t get overwhelmed with these technical words. Let’s talk about them.

Cubit

  • Cubit is more like a light version of the bloc, It is easier and meant to use for small states.
  • The best example would be if you want to change the app theme from dark to light or vice versa since it has only a few states i.e dart, light, and system theme
  • So in a nutshell cubit is a light version that handles a light state.

Bloc

  • While on the other side, the bloc is used for large application which has complex state
  • An example would be when you want to call an HTTP request since it has different states such as HTTP calls, request called request error and etc.
  • Meant to use for large projects and complex states.

Don’t worry if you didn't understand a thing here, All you need to know is there are two ways of achieving flutter bloc(cubit and bloc itself). We will discuss the differences and similarities in a later tutorial once you have a clear understanding of cubit and bloc with an example.

Now before we start with an example there are a few terminologies that you need to understand and these terms are common for both cubit and bloc.

If you feel like cubit is too basic or not for you I encourage you to still learn cubit since by learning cubit you are learning bloc. It is like a learning cycle to learn to bike.

So, here are a few things you need to know.

  1. BlocProvider (Widget coming from flutter bloc)

a) If you want to use value/instance in just one page(eg. int count state in only HomePage) then you provide Bloc Provider widget in just one page.

eg.

BlocProvider<CounterCubit>(
create: (context) => CounterCubit(),
child: HomePage(),
)

Don't confuse too much, what it is saying is that whatever we have defined in CounterCubit you want to use that only in HomePage.

b) If you want to use value/instance that you want to use throughout your application(eg. int count state all pages). Then wrap BlocProvider inside MaterialApp

BlocProvider<CounterCubit>(
create: (context) => CounterCubit(),
child: MaterialApp(
home: HomePage(),
),
)

So. In nutshell, BlocProvider is more like giving a scope of bloc or cubic.

In the previous two cases, we are giving CounterCubit access.

2. BlocBuilder(Widget coming from flutter bloc)

  • BlocBuilder is a widget that gets called when there is a change in state. Eg when the counter value increases or when the theme change from dark to light.
  • Like, increase count when the button is pressed.
BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) {
if (state is CounterIncrement) {
return Text(state.count.toString());
}
return Text('0');
},
)

3. Access Cubit or bloc

If you want to access flutter bloc/ cubit, You can access using BLocProvider.of context.

CounterCubit cubit = BlocProvider.of<CounterCubit>(context);

Note: These are the three basic concept you should know before start with an example. But if you did’t understand much here just make sure you know there is someting called BlocProvider and BlocBuilder which manage states.

Now we will continue with a simple example with the counter application so that you can have a better picture of the flutter cubit/bloc.

I personally believe that example is a lot better than the boring theory. I hope you do too. Alight that all guys. Thanks for reading this shitty blog. With that said In the next post, we will start with a simple example.

Thanks for taking your time for this shitty blog. please make sure to give a clap 👏 and leave some engagement. let me know in the comment section if you face any issues.

Check out more blogs from CodingWithTashi. Follow me on Twitter or Instagram or YouTube.

--

--

--

Native Android / Flutter Developer | Flutter enthusiast | Content Creator

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Harnessing the Technological Age

Phase 1 Project

Software Development is Harder Than Ever, so We Created an Open-Source Backend to Make It Less…

Game Dev in Progress… Day 43

Docker: Learn and Practice, Part 1

Supporting Multiple Time Zones on Hive with Single Data Source

Azure Web App Bot with QnA Maker

2020 JS project: 1. Tools and minimal API with Python-Eve

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodingWithTashi

CodingWithTashi

Native Android / Flutter Developer | Flutter enthusiast | Content Creator

More from Medium

How to Change app icon in flutter

Flutter Best Practices (Part 2)

Flutter Navigation with AutoRoute

Flutter: Tipps & Tricks for keeping your UI code clean