Ultimate Guide: How to Implement Cubit Example in Flutter App – Easiest Tutorial (2025)

This post will be about implementing the cubit example in your flutter app. This is not the typical counter increment example. I have provided you the practical example which is very rare on the web.

For me when I started learning bloc and cubit , experience was very scary because people(me) tend to directly jump into implementations.

One very unusual thing happened with me and many fellow developers is we directly get all the implemented steps in some GitHub project or we get the same old counter example to understand Cubit/Bloc

In this post we will be following along how to start implementing cubit with step by step approach . I will be showcasing here a very detailed guide on how to approach each class and how to think along when implementing cubit. In this post we will not be dumping all the source code at once , instead we will cover each class creation and also see where its significant and why we are creating it. At some places we will be coming with widget codes directly because we have very simple UI to explain the bloc.cubit concepts.

Why Bloc is important ?
Very simple: To separate business logic and UI code. And for accessing the state/data of one widget into some another widgets.(Global State management)

So Global state management is nothing but accessing the data generated in one widget into another widget which is created deep inside app widget hierarchy. E.g Marking a list of items and move to cart, so the items that are added in the cart is usable by not only cart screen but at many other places. In our example we will be fetching data using Cubit in this part -1.

Let’s see the diagram and break into this diagram.

We will create all these three parts in our code step by step and finally connect all this in the main.dart using provider.
Very important is “functions” because our app UI will change using function call in Cubit.

One important difference between Cubit and Bloc is :
Cubit works with “functions” and Bloc works with “Events”

 

So enough of theory , lets start with creating this components
Step 1: Lets create a UI screen first, our UI screen is movie_page.dart which is a first home page which will be loaded in main.dart.
movie_page.dart

contains a stateful widget which consists of simple list builder:

We will update the above class with meaningful steps one by one , please follow the screenshot below and the steps after that.
Let’s install these dependencies:

bloc: ^8.1.3
flutter_bloc: ^8.1.4
dio: ^5.4.1
equatable: ^2.0.5

Dio we will be using for api call and equatable we will be using to compare the cubit classes.

We need bloc extension by Felix Angelov in vscode for making our life easy , these extension will provide a superpower to vscode for creating cubit class and provide us autogenerated templates for creating cubit classes, so that we dont need to write boilerplate codes.

https://marketplace.visualstudio.com/items?itemName=FelixAngelov.bloc

Now , after adding this extension we will be creating our cubit class , these will look something like this. You have to right click on folder and selection “new cubit option”

These will create two important classes. One is Cubit class and second is state class.

We know that any api integration will move step by step from three/four states. Initial state, Loading state, Loaded state(Success state) and Error State(Fail State). We will create a function which will reflect these states so that our app can gradually covers all these states and our UI changes gets reflected accordingly

We have different states , we are returning List<Result> which is a list of movies which will be returned on success state, empty on Loading state, empty on error state.

Based on this states our app UI will react , on loading our app will show loader and on success it will render the list , these we will see at the end.

And our Cubit class looks like these, we will cover repository class also, these is the same class(third component) from cubit diagram. so till here we have covered all the classes

If you are preparing for best flutter resources and questions then we got you covered.
https://askfortricks.com/top-50-interview-questions-for-flutter-developer

Top Flutter Developer Interview Questions for Freshers in 2025 to succeed