Mastering Bloc with ‘GetCubit’ in Flutter

When you’re working with Flutter, you might want to manage the state of your app. This is where the Cubit class comes in handy — it helps you separate the code that manages state from the code that displays your app.

However, managing instances of the Cubit class can be a bit tricky. That’s where the GetCubit package comes in. It’s a package that helps you easily manage your Cubit instances, so you don’t have to worry about it.

Basically, with GetCubit, you can register your Cubit instances using unique identifiers, so you can easily access and manipulate the state of your app from anywhere in the app.

Overall, if you’re working with the Cubit class in Flutter, GetCubit is a helpful tool to have in your toolbox!

Now let’s dive in a little deeper and understand how we can use this package in our application!

Before we get started, I presume you already have worked with Bloc or atleast have a basic understanding of using it. If not, do not worry, i have got your back. Here is one of the best tutorials out there to learn Bloc.

I have setup a Flutter project and added flutter_bloc and get_cubit in my project dependencies.

I have created a CounterCubit class for demonstration purpose.

In the above CounterCubit class, I have created 3 methods:

• increment() : This will increment the value of counter by 1.
• decrement() : This will decrement the value of counter by 1.
• reset() : This will reset the value of counter to 0.

Counter Widget for the Cubit

The above counter widget can be interacted using the below code :

  counterWidget(
              onInc: () {},
              onDec: () {},
              onRes: () {},
              counterName: 'Initial Counter',
              counterValue: 0,
           );

Now, let us add the required functionality to this widget using get_cubit and flutter_bloc

 BlocProvider.value(
              value: GetCubit.put(CounterCubit()),
              child: BlocBuilder<CounterCubit, int>(
                builder: (context, state) {
                  return counterWidget(
                    onInc: () => GetCubit.find<CounterCubit>().increment(),
                    onDec: () => GetCubit.find<CounterCubit>().decrement(),
                    onRes: () => GetCubit.find<CounterCubit>().reset(),
                    counterName: 'Initial Counter',
                    counterValue: state,
                  );
                },
              ),
            ),

In the above code, I have wrapped the counterWidget with a BlocBuilder and have injected the CounterCubit using BlocProvider.value

Here, we can see that as value i have provided :

GetCubit.put(CounterCubit());

The above line registers a singleton instance of the given cubit. Once a singleton has been registered it can be accessed from anywhere in the code using the find method present in the GetCubit class.

GetCubit.find<CounterCubit>();

The above code returns the registered instance of the CounterCubit class, which means we can easily access all the methods present in the class.

Let us see this in action

OKAY!! Now that this is working, Let us dive deeper and have a look at other useful functionalities provided by the get_cubit package.

Let’s think of a scenario where we are trying to make a comment section. We know that each comment will have likes and replies. Since there will be multiple comments, we cannot use a single cubit to handle all the state changes happening here. Hence, there would be a requirement where we would have to create multiple cubits and map them to each comment. Achieving this using GetCubit is much easier! We have an option to register a cubit in GetCubit using unique identifiers.

Here in our example, we will try to mimic similar behaviour and use case using Multiple counters and a single control panel.

Here we can see we have 5 counters, I have used a ListView.builder to create a list of this counters, have injected the cubits with id concurrently, the code for this will look something like :

Here we can see for each counterWidget we have injected CounterCubit using :

GetCubit.put(CounterCubit(),id : index.toString())

By doing this, each counterWidget is linked to a cubit with an id, here the id will be its index in the list. In order to update the state of any of this counterWidget we can use GetCubit.find<{CubitName}>(id : {linked_id}) to find that particular instance and then use the written methods. Below is an example to access and use “Counter : 1”

CounterCubit counterCubit = GetCubit.find<CounterCubit>(id : '1'); 
// the above line will give me the instance of CounterCubit linked to "Counter : 1"

// now we can simply use the methods that we had defined in out CounterCubit class
// to do the necessary operations

counterCubit.increment(); // will increment "Counter : 1" by 1 
counterCubit.decrement(); // will decrement "Counter : 1" by 1
counterCubit.reset(); // will reset "Counter : 1" to 0

To demonstrate this with multiple counters, i have created a dropdown to select the counter which has to be controlled and used similar method as above to control them, The code for this will be available at the end.

Now that we have seen how we can handle multiple cubits using GetCubit, All these registered instances could still be in memory even when they are no longer used, to counter this we have some handy methods in GetCubit to clear them from memory. Let us have look on these methods as well before ending this article.

GetCubit.delete<MyCubit>();
// the above method will delete a singleton instance of MyCubit if present in memory

GetCubit.delete<MyCubit>(id : my_unique_id);
// this will delete the instance of MyCubit which is linked with my_unique_id

GetCubit.deleteAllCubitInstances<MyCubit>();
// the above method will remove all the instances of the MyCubit from memroy
// this includes any singleton instance or instance linked with ids

GetCubit.flush();
// flushes all the cubit instances from the memory

Code for the above example : https://github.com/t0uh33d/get_cubit/tree/main/example

GetCubit : https://pub.dev/packages/get_cubit