Challenge 2
- Flutter course
- Advanced
- Lesson 67/69
- 3 min
Build a login flow with error handling via Bloc.
Challenge 2 - Login with Bloc
In this challenge you will build a login flow with a Bloc. A LoginEvent arrives, the LoginState becomes loading, then transitions to success or failure.
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmitted>((event, emit) async {
emit(LoginLoading());
emit(LoginSuccess());
});
}
}Practice Define LoginBloc
First define LoginEvent (abstract) and LoginSubmitted. Then define LoginState (abstract) and LoginInitial, LoginLoading, LoginSuccess. Define LoginBloc as Bloc<LoginEvent, LoginState>: constructor calls super(LoginInitial()), registers on<LoginSubmitted>, handler first does emit(LoginLoading()) then emit(LoginSuccess()). In main, create a LoginBloc instance and print state.runtimeType.
Starter code
import 'package:flutter_bloc/flutter_bloc.dart';
// LoginEvent ve LoginSubmitted sınıflarını tanımla
// LoginState ve LoginInitial, LoginLoading, LoginSuccess sınıflarını tanımla
// LoginBloc sınıfını Bloc<LoginEvent, LoginState> olarak tanımla
// constructor başlangıç state'i LoginInitial ile başlasın ve LoginSubmitted event'ini kaydetsin
// handler önce loading sonra success emit yapsın
void main() {
// LoginBloc örneği al ve state'in runtimeType'ını yazdır
}Sample solution
import 'package:flutter_bloc/flutter_bloc.dart';
abstract class LoginEvent {}
class LoginSubmitted extends LoginEvent {}
abstract class LoginState {}
class LoginInitial extends LoginState {}
class LoginLoading extends LoginState {}
class LoginSuccess extends LoginState {}
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmitted>((event, emit) async {
emit(LoginLoading());
emit(LoginSuccess());
});
}
}
void main() {
final bloc = LoginBloc();
print(bloc.state.runtimeType);
bloc.close();
}Expected output
LoginInitial
Practice Add the LoginSubmitted event
The following classes are provided: LoginEvent, LoginSubmitted, LoginState, LoginInitial, LoginLoading, LoginSuccess, LoginBloc. In main, create a LoginBloc instance, call bloc.add(LoginSubmitted()), wait 100ms, print bloc.state.runtimeType, then call bloc.close().
Starter code
import 'package:flutter_bloc/flutter_bloc.dart';
abstract class LoginEvent {}
class LoginSubmitted extends LoginEvent {}
abstract class LoginState {}
class LoginInitial extends LoginState {}
class LoginLoading extends LoginState {}
class LoginSuccess extends LoginState {}
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmitted>((event, emit) async {
emit(LoginLoading());
emit(LoginSuccess());
});
}
}
void main() async {
// LoginBloc örneği al, LoginSubmitted ekle, 100ms bekle, state runtimeType yazdır
}Sample solution
import 'package:flutter_bloc/flutter_bloc.dart';
abstract class LoginEvent {}
class LoginSubmitted extends LoginEvent {}
abstract class LoginState {}
class LoginInitial extends LoginState {}
class LoginLoading extends LoginState {}
class LoginSuccess extends LoginState {}
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmitted>((event, emit) async {
emit(LoginLoading());
emit(LoginSuccess());
});
}
}
void main() async {
final bloc = LoginBloc();
bloc.add(LoginSubmitted());
await Future.delayed(const Duration(milliseconds: 100));
print(bloc.state.runtimeType);
bloc.close();
}Expected output
LoginSuccess
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What runs when a new event arrives in a Bloc?
- createState
- dispose
- build method
- The handler registered with on<Event> Correct answer
Explanation: The Bloc routes the incoming event to the handler registered with on<Event>; the handler updates state via emit.
2 Transition to success state with emit
emit(____);emit(LoginSuccess);Explanation: When the operation succeeds, the handler updates state with emit(LoginSuccess()); LoginEvent and LoginState are class categories, LoginInitial is the initial state.
3 Bloc matches
| Term | Meaning |
|---|---|
Bloc |
Event and state manager |
event |
User action |
state |
Screen state |
emit |
Updates state |