Özet - Bloc ileri

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.

Örnek çözümü göster

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

Kendini test et

Login akışında butona basıldığında ne olur?
- State doğrudan LoginSuccess olur
- LoginSubmittedEvent tetiklenir ve Bloc işler
- BlocBuilder yeniden inşa edilmez
- Event sınıfı bellekten silinir
Cevabı göster

LoginSubmittedEvent tetiklenir ve Bloc işler — Butona basınca bir LoginSubmittedEvent oluşturulur ve bloc.add ile Bloc'a gönderilir; Bloc event'i işleyerek state üretir.

Loading state üret

on<LoginSubmittedEvent>((event, emit) async {
  ____(LoginLoading());
  await Future.delayed(Duration(milliseconds: 10));
  emit(LoginSuccess('Ayşe'));
});

Cevabı göster

on<LoginSubmittedEvent>((event, emit) async {
  emit(LoginLoading());
  await Future.delayed(Duration(milliseconds: 10));
  emit(LoginSuccess('Ayşe'));
});

Login akışı parçaları

LoginSubmittedEvent

Kullanıcı niyeti
LoginLoading

Bekleme durumu
LoginSuccess

Başarı durumu
on<LoginSubmittedEvent>

Event işleyici

Sıradaki ders: Hive nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler