Event classes
- Flutter course
- Advanced
- Lesson 7/69
- 4 min
Define intents with event classes.
What are event classes?
Events are classes that represent the user's intent. Each action such as pressing a button or submitting a form corresponds to a separate event class. All events derive from a common abstract class and are triggered with bloc.add(EventType()).
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}
bloc.add(IncrementEvent());Event naming and immutability
Event classes should be immutable: all their fields are final. They are usually named with a verb + Event pattern, such as LoginSubmittedEvent or ItemDeletedEvent. Events that carry data take it in the constructor.
class ItemDeletedEvent extends TodoEvent {
final int index;
ItemDeletedEvent(this.index);
}Practice Write a TodoBloc and AddItemEvent
Define the TodoEvent abstract class and an AddItemEvent subclass that carries a title parameter. TodoBloc should start with an empty list and its AddItemEvent handler should add the title to the list. In main, trigger the event, wait, and print the first item.
Starter code
import 'package:bloc/bloc.dart';
// TodoEvent soyut sınıfını tanımla
// AddItemEvent sınıfı: başlık parametresi
class TodoState {
final List<String> items;
TodoState(this.items);
}
// TodoBloc sınıfını yaz
// başlangıç state boş liste
// AddItemEvent işleyicisi listeye başlık ekle
void main() async {
// oluştur, AddItemEvent ekle, bekle, yazdır
}Sample solution
import 'package:bloc/bloc.dart';
abstract class TodoEvent {}
class AddItemEvent extends TodoEvent {
final String title;
AddItemEvent(this.title);
}
class TodoState {
final List<String> items;
TodoState(this.items);
}
class TodoBloc extends Bloc<TodoEvent, TodoState> {
TodoBloc() : super(TodoState([])) {
on<AddItemEvent>((event, emit) =>
emit(TodoState([...state.items, event.title])));
}
}
void main() async {
final bloc = TodoBloc();
bloc.add(AddItemEvent('Süt al'));
await Future.delayed(Duration(milliseconds: 10));
print(bloc.state.items.first);
}Expected output
Süt al
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does an event class represent?
- The current appearance of the interface
- The database table structure
- The hierarchy in the widget tree
- The user's intent Correct answer
Explanation: Events represent user intent; the UI appearance is the state, and the hierarchy is the widget tree.
2 Define an event class
class AddItemEvent extends ____ {
final String title;
AddItemEvent(this.title);
}class AddItemEvent extends TodoEvent {
final String title;
AddItemEvent(this.title);
}Explanation: AddItemEvent is an event, so it derives from the base event class TodoEvent; not from Bloc or State.
3 Event parts
| Term | Meaning |
|---|---|
abstract class TodoEvent |
Base event class |
class AddItemEvent extends |
Derived event |
bloc.add(Event()) |
Triggers an event |
final String title |
Event parameter |