Event classes

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);
}

Exercise 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.

Show example 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);
}

Test yourself

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
Show answer

The user's intent — Events represent user intent; the UI appearance is the state, and the hierarchy is the widget tree.

Define an event class

class AddItemEvent extends ____ {
  final String title;
  AddItemEvent(this.title);
}

Show answer

class AddItemEvent extends TodoEvent {
  final String title;
  AddItemEvent(this.title);
}

Event parts

abstract class TodoEvent

Base event class
class AddItemEvent extends

Derived event
bloc.add(Event())

Triggers an event
final String title

Event parameter

Next lesson: State classes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies