Flutter 상태관리 (Bloc - Cubit)

Flutter (dart) 의 상태관리 pattern 을 package 화 해놓은 것

 

아래 명령을  Terminal 에서 처리 하자

Flutter pub add bloc 

Flutter pub get

 

1. cubit (event 없이 state 만 관리)

: Cubit는 BlocBase를 확장하는 클래스이며 모든 유형의 상태를 관리하도록 확장할 수 있다.

 

https://dartpad.dev/

에서 아래 코드를 실행해 보자

 

import 'package:bloc/bloc.dart';

// 사용
void main() {
  final cubit = CounterCubit();
  print(cubit.state); // 0
  cubit.increment();
  print(cubit.state); // 1
  cubit.close();
}

// 상태 변경
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

Run 버튼을 click 하면 아래와 같이 나온다.

아래 내용들을 모두 실행해 보자 (각각을 분리하여 실행해 보자)

// 정의 
class CounterCubit extends Cubit<int> {
  CounterCubit(int initialState) : super(initialState);
}
// 할당
final cubitA = CounterCubit(0); // state starts at 0
final cubitB = CounterCubit(10); // state starts at 10



// 정의 2
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
}


// 정의 2 (상태 변경 )
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

// 사용
void main() {
  final cubit = CounterCubit(); //할당
  print(cubit.state); // 0
  cubit.increment();
  print(cubit.state); // 1
  cubit.close();
}

// 실시간 상태 update 위한 main 변경 (async ... await  Future)
Future<void> main() async {
  final cubit = CounterCubit();
  final subscription = cubit.stream.listen(print); // 1
  cubit.increment();
  await Future.delayed(Duration.zero);
  await subscription.cancel();
  await cubit.close();
}


// onChange 를 통해 상태 변경 관찰 가능
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);

  @override
  void onChange(Change<int> change) {
    print(change);
    super.onChange(change);
  }
}

블록 옵저버 (BlocObserver)

:  bloc 의 모든 변경 내용을 관찰 하기 위한 class

// 정의
class SimpleBlocObserver extends BlocObserver {
  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    print('${bloc.runtimeType} $change');
  }
}

// 사용
void main() {
  BlocOverrides.runZoned(
    () {
      CounterCubit()
        ..increment()
        ..close();
    },
    blocObserver: SimpleBlocObserver(),
  );
}

참고로 CounterCubit 자체 인스턴스에 onChange 가 먼저 호출되고

Global 한 BlocObserver 의 onChange 가 호출된다. 

 

 

관련영상

https://youtu.be/EG-rAJsMgOs