Bloc class
- Flutter course
- Advanced
- Lesson 6/69
- 4 min
Manage event -> state flow with the Bloc class.
What is a Bloc class?
A Bloc is a class that transforms events into states. Unlike Cubit, it works with event objects instead of method calls. For each event type you register a handler with on<Event>; the handler produces a new state with emit.
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(0)) {
on<IncrementEvent>((event, emit) =>
emit(CounterState(state.count + 1)));
}
}on<Event> and emit
You register a handler for an event type with on<Event>. The handler takes two parameters: the event and emit. Calling emit(newState) updates the state and notifies listening widgets. emit can only be called inside a handler.
on<IncrementEvent>((event, emit) =>
emit(CounterState(state.count + 1)));Practice Write a CounterBloc class
Write a class named CounterBloc that extends Bloc<CounterEvent, CounterState>. The initial value should be 0. The IncrementEvent handler should increase the counter by 1. In main, create an instance, add the event twice, wait, and print state.count.
Starter code
import 'package:bloc/bloc.dart';
class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class CounterState {
final int count;
CounterState(this.count);
}
// CounterBloc sınıfını yaz
// Bloc<CounterEvent, CounterState> türet
// başlangıç değer 0 ile başlat
// IncrementEvent işleyicisi sayacı 1 artırsın
void main() async {
// oluştur, iki kez event ekle, bekle, yazdır
}Sample solution
import 'package:bloc/bloc.dart';
class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class CounterState {
final int count;
CounterState(this.count);
}
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(0)) {
on<IncrementEvent>((event, emit) =>
emit(CounterState(state.count + 1)));
}
}
void main() async {
final bloc = CounterBloc();
bloc.add(IncrementEvent());
bloc.add(IncrementEvent());
await Future.delayed(Duration(milliseconds: 10));
print(bloc.state.count);
}Expected output
2
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the main difference between Bloc and Cubit?
- Bloc works with event objects, Cubit with method calls Correct answer
- Bloc holds only async state, Cubit holds sync state
- Cubit uses events but Bloc does not hold state
- They are identical, only the name differs
Explanation: Bloc takes event objects and produces state; in Cubit you call methods directly and emit from inside them.
2 emit call
on<IncrementEvent>((event, emit) => ____(CounterState(state.count + 1)));on<IncrementEvent>((event, emit) => emit(CounterState(state.count + 1)));Explanation: Inside a handler you call emit to produce a new state; add is for adding events and state is for reading.
3 Bloc parts
| Term | Meaning |
|---|---|
on<IncrementEvent> |
Event handler registration |
emit |
Produces state |
Bloc<Event, State> |
Two generic parameters |
super(CounterState(0)) |
Initial state |