Flutter Bloc과 Cubit

Flutter는 앱 데이터의 상태 관리를 위해 Bloc과 Cubit을 제공한다. Cubit은 Bloc의 6.0.0 버전부터 새롭게 제공된 Bloc의 경량화 버전이다.

Bloc

• 호출 이벤트 및 상태 변경이 모두 Stream이다.
• 모든 과정이 Stream이기 때문에 Event sourcing을 할 수 있다.
• UI가 Bloc에 events를 보낸다.
• 호출 이벤트가 Stream이기 때문에 가능한 기능들이 추가되지만 보일러 플레이트가 상당하다.

class CityBloc extends Bloc<CityEvent, City> {
  CityBloc() : super(City()){
    on<GenerateCityEvent>(
      generateCity,
      transformer: debounce(const Duration(milliseconds: 300))
    );
  }

  FutureOr<void> generateCity(GenerateCityEvent event, Emitter<City> emit){
    final City city = City(name: event.name, country: event.country);
    emit(city);
  }

  EventTransformer<T> debounce<T>(Duration duration) {
   return (events, mapper) => events.debounceTime(duration).flatMap(mapper); 
  }
}

abstract class CityEvent {}

class GenerateCityEvent extends CityEvent{
  final String name;
  final String city;
  
  GenerateCityEvent({this.name = '', this.city = ''});
}

Cubit

• 호출 이벤트는 Stream이 아니며 emit을 통해 UI에 상태가 전달 될 때는 Stream이다.
• 이벤트를 호출하는 과정은 Event sourcing이 힘들다.
• UI가 Cubit에 functions를 보낸다.
• 비즈니스 로직을 직접 호출해서 데이터 상태를 변화시킨다.

class CityCubit extends Cubit<City> {
  CityCubit():super(City());

  void generateCity(String name, String country) {
    final City city = City(name: name, country: country);
    emit(city);
  }
}

선택

Bloc은 안드로이드의 LiveData 및 Rxjava, Observer 패턴과 비슷하고 Cubit은 DataClass와 비슷하다. 왠만하면 Cubit을 사용하되, 모든 부분에 있어서 Stream을 제공해야 하는 경우(debounce 등의 Stream이어야 제공 가능한 기능 등)에만 Bloc을 쓰면 될 것 같다.

references:

https://velog.io/@sunwonsw95/Flutter-Bloc-Cubit 

[Flutter] Bloc & Cubit

https://velog.io/@lovejaeeundev/Flutter-Bloc-Cubit-Tutorial%EC%85%80%ED%94%84-%EC%8A%A4%ED%84%B0%EB%94%94

Flutter Bloc & Cubit Tutorial(셀프 스터디)