BlocConsumer

监听特定条件同时builder有效(BlocConsumer

BlocConsumer는 Flutter에서 Bloc 또는 Cubit 패턴을 사용할 때, 상태 변화에 따라 UI를 재구성하는 동시에 부수 효과(side effects)를 처리할 수 있는 위젯입니다. BlocConsumerBlocBuilderBlocListener의 기능을 결합한 위젯으로, 상태 변화에 따라 UI를 업데이트하면서 필요한 부수 효과도 실행할 수 있습니다.

사용 방법

BlocConsumerbuilderlistener 두 개의 콜백을 제공합니다. builder는 상태 변화에 따라 UI를 어떻게 그릴지 정의하는 반면, listener는 상태 변화에 따라 실행할 부수 효과를 정의합니다.

BlocConsumer<BlocType, BlocState>(
  listener: (context, state) {
    // 부수 효과 처리
  },
  builder: (context, state) {
    // UI 구성
  },
)

  • BlocType: 감시하고자 하는 Bloc 또는 Cubit의 타입입니다.
  • BlocState: 해당 Bloc 또는 Cubit의 상태 타입입니다.
  • listener: 상태 변화에 따라 실행할 작업을 정의하는 함수입니다.
  • builder: 상태 변화에 따라 UI를 어떻게 빌드할 것인지 정의하는 함수입니다.

기능

  • 효율적인 상태 관리: BlocConsumer는 상태 변화에 따라 UI를 업데이트하고 필요한 부수 효과도 처리할 수 있어, 상태 관리가 보다 효율적으로 이루어집니다.
  • 코드 간소화: BlocBuilderBlocListener를 각각 사용하는 것보다 코드를 간소화할 수 있습니다.
  • 부수 효과와 UI 분리: 상태 변화에 따른 UI 업데이트와 부수 효과 처리를 분리하여 관리할 수 있습니다.

예시

BlocConsumer<AuthenticationBloc, AuthenticationState>(
  listener: (context, state) {
    if (state is AuthenticationFailure) {
      // 로그인 실패 시 처리
    }
  },
  builder: (context, state) {
    if (state is AuthenticationSuccess) {
      return HomePage();
    } else {
      return LoginPage();
    }
  },
)

이 예시에서, BlocConsumerAuthenticationBloc의 상태 변화를 감시합니다. 상태가 AuthenticationFailure일 때는 특정 부수 효과를 처리하고, AuthenticationSuccess일 때는 홈페이지를 표시합니다.

주의 사항

  • BlocConsumerflutter_bloc 패키지의 일부이므로, 이를 사용하기 위해서는 해당 패키지를 프로젝트에 추가해야 합니다.
  • 부수 효과는 상태 변화에 따라 한 번만 실행되어야 하며, UI 업데이트는 상태에 따라 반복적으로 실행될 수 있습니다.
Last Updated:
Contributors: RiGang