What is Cubit?

Cubit is a state management. It is a subset of the bloc package that does not given credit to events and instead uses methods to emit new states. It’s a class that stores an observable state, the observation is powered by Streams but in such a friendly way that it is not necessary to know reactive programming

What is Cubit state?

Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states. Every cubit requires an initial state which will be the state of the cubit before emit has been called.

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

App Cubits that extends cubit

The first step is to add dependencies to pubspec.yaml. Both Cubit and Bloc are interoperable, in fact, the Bloc class extends Cubit. This means we need to import only the bloc and flutter_bloc libraries and we’re going to get Cubit bundled for free.

dependencies:

flutter:

sdk: flutter

bloc: ^6.0.1

flutter_bloc: ^6.0.1

Next, we need to create the files that’ll hold our WeatherCubit and also WeatherState classes. It’s possible to create all these files and boilerplate manually but there are also handy extensions for VS Code and IntelliJ/Android Studio. We’ll use VS Code in this tutorial.

Weather State

A rule of thumb is to always build out the state class(es) first. They’re the reason why you want to create a Cubit in the first place, right? Without a proper representation of the state of the Cubit, you can’t possibly write logic that will emit new states. So, what kind of WeatherState do we want to have?

Well, we’re going to be asynchronously loading a single resource – the Weather model. In such occasions, it’s best to represent the state as multiple subclasses of the WeatherState abstract class. If we take a look at the weather_state.dart file generated by the extension, we can see that one such subclass has already been created for us:

part of ‘weather_cubit.dart’;

abstract class WeatherState {

const WeatherState();

}

class WeatherInitial extends WeatherState {

const WeatherInitial();

  Example:  class AppCubits extends Cubit<CubitState>{

            AppCubits() : super(InitialState())

             emit(WelcomState());

CubitStates that extends equitable

This WeatherInitial state will indicate that no action has yet been taken by the user and that we should display an initial UI. So, what other state subclasses should there be for asynchronously loading the weather? Well, we need to be able to show a progress indicator while we’re awaiting the data and then handle success or a possible error.

class WeatherLoading extends WeatherState {

const WeatherLoading();

}

class WeatherLoaded extends WeatherState {

final Weather weather;

const WeatherLoaded(this.weather);

@override

bool operator ==(Object o) {

if (identical(this, o)) return true;

return o is WeatherLoaded && o.weather == weather;

}

@override

int get hashCode => weather.hashCode;

}

class WeatherError extends WeatherState {

final String message;

const WeatherError(this.message);

@override

bool operator ==(Object o) {

if (identical(this, o)) return true;

return o is WeatherError && o.message == message;

}

@override

int get hashCode => message.hashCode;

}

Example: abstract class CubitState extends Equatable{}

class InitialState extends CubitState{

@override

List<Object> get props =>[];

}

Create State-

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.

 Example: abstract class CubitState extends Equatable{}

Create 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 keyword. You need to initialize a state using super() during cubit initialization.

Example: class AppCubits extends Cubit<CubitStates>{

AppCubits():super(InitialState());

}

Conclusion

Cubit is a combination of the bloc and provider packages where you get riddance from events and rely on methods while you get ease in managing it as it helps to implement it with ease without any boilerplate code so till now it is one of the best combinations of the two state management techniques.