Flutter Bloc Pattern— Simple Cubits

In this article we will discuss about how to make use of flutter bloc and manage the states in our counter app.

📺 Video Tutorial

🛠️ Dependencies

flutter_bloc | Flutter Package

Widgets that make it easy to integrate blocs and cubits into Flutter. Built to work with package:bloc. Learn more at…

pub.dev

🔬 Implementation

We will be making use of Flutter Bloc pattern (cubits) to create a simple counter app in flutter.

What are Cubits?
Cubits are nothing but a minimal version of Bloc itself. They are light weight and easy to implement state management technique.

In our application we will be having two events, one is increment counter and another is decrement counter (these two events are the inputs of bloc).

First, let’s start building our UI as follows 👇.
Create a stateless widget class with a text widget to display the counter value and two buttons one for increment and another for decrement operations.

2. Create Cubits and specify the states and events.
To make the process easy, we can install the “bloc” extension available in VS Code to get handy and useful features right in your workspace.

After installing this extension, we can right click on the lib folder in our project directory and at the very bottom we will notice the option to create cubits. Click it and provide a name for the cubits and hit enter. (Let’s name it “ counter” for this example). Now we will notice two dart files being created in our lib folder (which specifies the cubits).

Starting with the counter_state.dart file, let’s specify the variable (counterValue) which holds the current counter value.

Now let’s define the events (increment and decrement, which changes the counter value by the factor of [+/- 1]) inside the counter_cubit.dart file.

Now it’s time to update the UI which we built earlier with the BlocBuilder Widget to re-render the widget tree upon any event change.

Here in our case the only widget that is going to change is the text widget so we can wrap that text widget alone with the BlocBuilder widget, and in order to access the counter value we can make use of state.counterValue.

Similarly call the corresponding increment and decrement cubit events inside the onPressed() method.

And now the right way to navigate to this page will be using BlocProvider