vijaycreations
Published in

vijaycreations

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

🔬 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).

  1. 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

Well that’s it. 🥳🎉

This is how we can implement Flutter Bloc using simple cubits to manage the states in our counter app.

Get the complete source code here 👉: https://github.com/vijayinyoutube/flutter_bloc_cubit_public

Check out all my Flutter related blogs here.,👇

--

--

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