Özet - Bloc ileri
- Flutter kursu
- İleri seviye
- Ders 10/69
- 4 dk
Bloc, event ve state'i birleştirerek login akışı yaparsın.
Login akışı
Bir login akışında Bloc, event ve state birlikte çalışır. Kullanıcı butona basınca LoginSubmittedEvent tetiklenir; Bloc bu event'i alır, önce LoginLoading üretir, işlem bitince LoginSuccess veya LoginFailure state'ine geçer. Arayüz BlocBuilder ile her state'e göre farklı widget gösterir.
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmittedEvent>((event, emit) async {
emit(LoginLoading());
await Future.delayed(Duration(seconds: 1));
emit(LoginSuccess('Ayşe'));
});
}
}Uygulama Tam login Bloc yaz
LoginEvent ve LoginSubmittedEvent tanımla. LoginState soyut sınıfını ve LoginInitial, LoginLoading, LoginSuccess (kullanıcı adı tutar) alt sınıflarını yaz. LoginBloc, LoginInitial ile başlasın; LoginSubmittedEvent işleyicisi önce LoginLoading, kısa bir beklemeden sonra LoginSuccess('Ayşe') üretsin. main'de event tetikle, bekle ve başarı durumunda kullanıcı adını yazdır.
Başlangıç kodu
import 'package:bloc/bloc.dart';
// LoginEvent soyut sınıfı
// LoginSubmittedEvent alt sınıfı
// LoginState soyut sınıfı
// LoginInitial, LoginLoading, LoginSuccess alt sınıfları
// LoginSuccess: kullanıcı adı tutar
// LoginBloc sınıfını yaz
// başlangıç state LoginInitial
// event işleyici: önce Loading, sonra Success
void main() async {
// oluştur, event ekle, bekle, durumu yazdır
}Örnek çözüm
import 'package:bloc/bloc.dart';
abstract class LoginEvent {}
class LoginSubmittedEvent extends LoginEvent {}
abstract class LoginState {}
class LoginInitial extends LoginState {}
class LoginLoading extends LoginState {}
class LoginSuccess extends LoginState {
final String user;
LoginSuccess(this.user);
}
class LoginBloc extends Bloc<LoginEvent, LoginState> {
LoginBloc() : super(LoginInitial()) {
on<LoginSubmittedEvent>((event, emit) async {
emit(LoginLoading());
await Future.delayed(Duration(milliseconds: 10));
emit(LoginSuccess('Ayşe'));
});
}
}
void main() async {
final bloc = LoginBloc();
bloc.add(LoginSubmittedEvent());
await Future.delayed(Duration(milliseconds: 50));
final state = bloc.state;
if (state is LoginSuccess) {
print(state.user);
}
}Beklenen çıktı
Ayşe
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Login akışında butona basıldığında ne olur?
- State doğrudan LoginSuccess olur
- LoginSubmittedEvent tetiklenir ve Bloc işler Doğru cevap
- BlocBuilder yeniden inşa edilmez
- Event sınıfı bellekten silinir
Açıklama: Butona basınca bir LoginSubmittedEvent oluşturulur ve bloc.add ile Bloc'a gönderilir; Bloc event'i işleyerek state üretir.
2 Loading state üret
on<LoginSubmittedEvent>((event, emit) async {
____(LoginLoading());
await Future.delayed(Duration(milliseconds: 10));
emit(LoginSuccess('Ayşe'));
});on<LoginSubmittedEvent>((event, emit) async {
emit(LoginLoading());
await Future.delayed(Duration(milliseconds: 10));
emit(LoginSuccess('Ayşe'));
});Açıklama: Handler içinde yeni state üretmek için emit çağrılır; add event eklemek için kullanılır ve handler içinde anlamsızdır.
3 Login akışı parçaları
| Kavram | Anlamı |
|---|---|
LoginSubmittedEvent |
Kullanıcı niyeti |
LoginLoading |
Bekleme durumu |
LoginSuccess |
Başarı durumu |
on<LoginSubmittedEvent> |
Event işleyici |