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
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…
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
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
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
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.,👇
Other articles you may like.,
Shared Preferences in Flutter
Store the data locally in Flutter app using Shared Preferences.
Setting up your Flutter app for publishing in Play Store.
Before publishing our Flutter app in Google Play Store we need to brush up few feature to make sure that the app is…
Creating Desktop Apps using Flutter
In this article we will discuss about how to create and run a desktop app using Flutter.
If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩