Flutter BLoC Cubit and emit basics: for beginners a Bottom Up Approach

In the BLoC (Business Logic Component) pattern using the flutter_bloc package, a Cubit is a simpler version of a Bloc. The key idea is:

A Cubit emits new states using the emit() method.

Let’s break it down:

What is emit?

emit() is a protected method inside a Cubit that pushes a new state to its stream. That state is then received by the UI or any listeners.

class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() {
emit(state + 1); // Emit a new state (next number)
}
}

How it works under the hood:

• Every Cubit has a current state.
• When emit(newState) is called:
• It updates the internal state
• It notifies all listeners (like UI widgets using BlocBuilder)
• Widgets rebuild only when the state changes

Practical Example:

class LoginCubit extends Cubit<LoginState> {

LoginCubit() : super(LoginInitial());

void login(String username, String password) {

emit(LoginLoading());

// Simulate async login
Future.delayed(Duration(seconds: 2), () {

if (username == 'admin' && password == 'admin') {
emit(LoginSuccess());
} else {
emit(LoginFailure("Invalid credentials"));
}

});
}
}

Then in your UI:

BlocBuilder<LoginCubit, LoginState>(
builder: (context, state) {
if (state is LoginLoading) {
return CircularProgressIndicator();
} else if (state is LoginSuccess) {
return Text("Login successful");
} else if (state is LoginFailure) {
return Text(state.errorMessage);
}
return LoginForm();
},
)

• emit() is used inside the Cubit only.
• It replaces the state with a new one — so avoid mutating the old state.
• UI updates only when the state changes.

Now Let’s see how BlocProvider and BlocListener (from the flutter_bloc package) interact with Cubit or Bloc and respond to emit.

1. 🧱 BlocProvider

This creates and provides the Cubit or Bloc to the widget subtree.

BlocProvider(
create: (context) => LoginCubit(),
child: LoginScreen(),
)

• It registers the Cubit/Bloc instance.
• All children of this widget can access it using: context.read<LoginCubit>() or context.watch<LoginCubit>().

2. 👂 BlocListener

This listens to state changes and performs side effects (like showing snackbars, navigation, etc.), but doesn’t rebuild UI.

BlocListener<LoginCubit, LoginState>(
  listener: (context, state) {
    if (state is LoginSuccess) {
      Navigator.pushNamed(context, '/home');
    } else if (state is LoginFailure) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.errorMessage)),
      );
    }
  },
  child: LoginForm(),
)

• It’s ideal for one-time effects like showing dialogs or navigation.
• It runs only when emit() is called and state changes.

3. 🎯 How emit() connects them all:

In your Cubit:

void login(String username, String password) {
emit(LoginLoading());
if (username == 'admin') {
emit(LoginSuccess());
} else {
emit(LoginFailure('Invalid user'));
}
}

• When emit(LoginSuccess()) is called:
• BlocListener gets triggered (runs its callback).
• BlocBuilder (if present) would rebuild the relevant UI part.

+-----------------------------------------------------+
|                   BlocProvider                      |
|  (Provides Cubit instance to the widget tree)       |
|                                                     |
|  +-----------------------------------------------+  |
|  |                    Cubit                     |  |
|  |  (Manages state, emits new states via emit()) |  |
|  +-----------------------------------------------+  |
+-----------------------------------------------------+
            |                   |
            | (state changes)   | (listen to state)
            v                   v
+---------------------+   +---------------------+
|     BlocBuilder      |   |    BlocListener     |
| (Rebuilds UI on      |   | (React to state     |
|  state changes)      |   |  changes, e.g.      |
|                      |   |  navigation,        |
|  return Widget()     |   |  show SnackBar)     |
+---------------------+   +---------------------+
            |
            | (combines both)
            v
+-----------------------------------------------------+
|                  BlocConsumer                       |
|  (Combines BlocBuilder and BlocListener -           |
|   both rebuilds UI and reacts to state changes)     |
+-----------------------------------------------------+