Flutter
Meydan okuma 2
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.
Örnek çözümü göster
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();
}
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().
Örnek çözümü göster
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();
}
Kendini test et
-
Bloc'ta yeni bir event geldiğinde ne çalışır?
- createState
- dispose
- build metodu
- on<Event> ile kaydedilen handler
Cevabı göster
on<Event> ile kaydedilen handler — Bloc, gelen event'i on<Event> ile kaydedilen handler'a yönlendirir; handler emit ile state'i günceller.
-
emit ile success durumuna geç
emit(____);
Cevabı göster
emit(LoginSuccess);
-
Bloc eşleşmeleri
- Bloc
- Event ve state yöneticisi
- event
- Kullanıcı eylemi
- state
- Ekran durumu
- emit
- State günceller
Sıradaki ders: Meydan okuma 3
