Understanding Cubits --- A basic working Cubit

A Cubit is a Flutter Class that provides an alternate and better method of state management to the setState method. It provides a system of state management that separates business logic from state management. We have two classes for doing this in Flutter.

1. BLOC. This is done via events

BLOC Documentation

2. Cubit. The cubit simply emits state. It relies on methods to emit state and does not use events.

Cubit Documentation

Every Cubit in Flutter has a getter called state which has an initial state. Every time emit is called the state can change.

In our example this is the initial state

The cubit object.

final cubit = VsjCubit(5);

The cubit class

class VsjCubit extends Cubit<int> {
VsjCubit(int startvalue) : super(startvalue);
void double() => emit(state + state);
void triple() => emit(state + state + state);
}

You need to subscribe to the cubit stream. you will be informed whenever the state changes.

final subscription = cubit.stream.listen(print);

In this case the print function will be called which will print the current state.

We start with a basic working Cubit





class VsjCubit extends Cubit<int> {
  VsjCubit(int startvalue) : super(startvalue);
  void double() => emit(state + state);
  void triple() => emit(state + state + state);
}
/*
 * Create Objects like this
final v0 = VsjCubit(0); // state starts at 0
final v10 = VsjCubit(10); // state starts at 10 
 */

Tracing the state changes.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  final cubit = VsjCubit(7);
  print(cubit.state); // 7
  cubit.double();
  print(cubit.state); // 14
  cubit.triple();
  print(cubit.state); // 21
  cubit.close();
}

class VsjCubit extends Cubit<int> {
  VsjCubit(int startvalue) : super(startvalue);
  void double() => emit(state + state);
  void triple() => emit(state + state + state);
}
/*
 * Create Objects like this
final v0 = VsjCubit(0); // state starts at 0
final v10 = VsjCubit(10); // state starts at 10 
 */

Output

Listening to Cubit state changes. The print function listens to this Cubit and prints the state after each change.

Now try this:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

Future<void> main() async {
  final cubit = VsjCubit(5);
  final subscription = cubit.stream.listen(print);
  cubit.double();
  cubit.triple();
  await Future.delayed(Duration(seconds: 5));
  cubit.triple();
  cubit.double();
  await Future.delayed(Duration(seconds: 5));
  await subscription.cancel();
  await cubit.close();
  print("Done");
}

class VsjCubit extends Cubit<int> {
  VsjCubit(int startvalue) : super(startvalue);
  void double() => emit(state + state);
  void triple() => emit(state + state + state);
}
/*
 * Create Objects like this
final v0 = VsjCubit(0); // state starts at 0
final v10 = VsjCubit(10); // state starts at 10 
 */