Meydan okuma 2
- Flutter kursu
- İleri seviye
- Ders 67/69
- 3 dk
Bloc ile login akışı ve hata yönetimi yaparsın.
Meydan okuma 2 - Bloc ile login
Bu meydan okumada bir Bloc ile giriş akışı yapacaksın. LoginEvent gelir, LoginState durumunu loading yapar, sonra success veya failure durumuna geçer.
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmitted>((event, emit) async {
emit(LoginLoading());
emit(LoginSuccess());
});
}
}Uygulama LoginBloc tanımla
Önce LoginEvent (abstract) ve LoginSubmitted sınıflarını tanımla. Sonra LoginState (abstract) ve LoginInitial, LoginLoading, LoginSuccess sınıflarını tanımla. LoginBloc sınıfını Bloc<LoginEvent, LoginState> olarak tanımla: constructor super(LoginInitial()) çağırsın, on<LoginSubmitted> kaydetsin, handler önce emit(LoginLoading()) sonra emit(LoginSuccess()) yapsın. main'de LoginBloc örneği al ve state.runtimeType'ı yazdır.
Başlangıç kodu
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
}Örnek çözüm
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();
}Beklenen çıktı
LoginInitial
Uygulama LoginSubmitted event'i ekle
Aşağıdaki sınıflar hazır verilir: LoginEvent, LoginSubmitted, LoginState, LoginInitial, LoginLoading, LoginSuccess, LoginBloc. main içinde LoginBloc örneği al, bloc.add(LoginSubmitted()) çağır, 100ms bekle, bloc.state.runtimeType'ı yazdır, sonra bloc.close().
Başlangıç kodu
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
}Örnek çözüm
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();
}Beklenen çıktı
LoginSuccess
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bloc'ta yeni bir event geldiğinde ne çalışır?
- createState
- dispose
- build metodu
- on<Event> ile kaydedilen handler Doğru cevap
Açıklama: Bloc, gelen event'i on<Event> ile kaydedilen handler'a yönlendirir; handler emit ile state'i günceller.
2 emit ile success durumuna geç
emit(____);emit(LoginSuccess);Açıklama: Handler, işlem başarılı olduğunda emit(LoginSuccess()) ile state'i günceller; LoginEvent ve LoginState sınıf kategorileridir, LoginInitial başlangıç durumudur.
3 Bloc eşleşmeleri
| Kavram | Anlamı |
|---|---|
Bloc |
Event ve state yöneticisi |
event |
Kullanıcı eylemi |
state |
Ekran durumu |
emit |
State günceller |