online software programming courses

Flutter Cubit Example State Management

If you tried to learn about Bloc, it would be hard to get your head around it. But you know BLoc needs events and states. They are combined using mapEventToState. Using this function based on events, states are created and rebuild the widget.

Donwload the starter code here(both for the carousel and the cubit app)

↓flutter app

Cubit App Architecture

Here is a good news. If you try to use Cubit, you don’t need to create events. Take a look at the simplest architecture idea

A Cubit is similar to Bloc but has no notion of events and relies on methods to emit new states. Simply speaking, cubit contains states and based on request it emits(fires) the states.

See another diagram for cubit with network request

Here we see that, we can accomplish network request using cubit.

Two other important concepts about Cubit. It has two important classes. We will use them through out the app.

BlocProvider

This one creates cubit for the app, and also specify the entry point for using cubit

BlocBuilder

This one checks all the states and ask for ui change

Every Cubit requires an initial state which will be the state of the Cubit before emit has been called. 

Just like BLoc we need to create a Cubit first. We will create a Cubit using BlocProvider just like Bloc creating. 

 

Create Cubit and State

In our app we will cubit and state. There are two classes I created for them

AppCubits that extends cubit

CubitStates that extends equatable

The Complete Cubit App

 

Create the states

Here we define some states. You need at least one initial state. States are triggered from emit() function. The function emit() can get called from your UI through BlocProvider.of<>(context)  and emit  states when necessary. Here props is the list of properties that will be used to determine whether two instances are equal.

Creating states are easy. In general first you need to create an abstract class, this abstract class should extend Equatable. Equatable is package that helps you know if two states are same or not.

 

Create the cubits

We need to build a class that extends Cubit. Cubit itself takes state. 

The current state of a Cubit can be accessed via the state getter or state keyword.

you need to initialize a state using super() during  cubit initialization.  So you can do like below to create a cubit and initialize cubit

class AppCubits extends Cubit<CubitStates>{
         AppCubits():super(InitialState());
}

So extending Cubit and passing a State class is super important. As well as calling the super constructor with InitialState().

 

Accessing cubit and state from ui

At the core, you need to use BlocProvider.of<AppCubits>(context).emitCaller() to access the cubit(the certain emit() function and the state. See the flow how it works.

 

Errors & Solutions

If you get error with image, pls check out the below settings for img folder

 

Check out pubspec file setting

 

And then restart your app