Bloc

최고의 상태 관리 패키지입니다.
주요로 Bloc, Event, state 세 가지 클래스로 구성되어 있습니다.
bloc 공식자료open in new window

Bloc의 VSCODE 플러그인

플러그인 링크open in new window

Bloc class

  1. on()
  2. emit()
  3. add()

Bloc 클래스는 주요로 위의 세 가지 메소드를 잘 활용하면 됩니다.

import 'package:bloc/bloc.dart';
import 'package:formz/formz.dart';
import 'package:meta/meta.dart';
import 'package:yir_formz/yir_formz.dart';

import 'email_text_input_state.dart';

part 'email_text_input_event.dart';

class EmailTextInputBloc
    extends Bloc<EmailTextInputEvent, EmailTextInputState> {
  EmailTextInputBloc() : super(EmailTextInputInitialState()) {
    on<EmailTextInputEvent>((event, emit) {
      if (event is EmailTextInputInitialEvent) {
        emit(
          EmailTextInputInitialState(),
        );
      }
      if (event is EmailTextInputChangedEvent) {
				// 通过event获取参数
        final email = Email.dirty(event.email);
        final status = Formz.validate([
          email,
        ])
            ? FormzSubmissionStatus.success
            : FormzSubmissionStatus.failure;

        emit(
          EmailTextInputChangedState(
            email: email,
            status: status,
          ),
        );
      }
    });
  }
}
  • Bloc 클래스는 주로 on() 메소드를 통해 이벤트를 받고, emit() 메소드를 통해 상태를 변경합니다.
  • Bloc 클래스는 주로 이벤트를 핵심으로 작성합니다.
  • 초기화 할때 state의 초기화 상태를 받고 이벤트에 따라 state 상태를 변경합니다.
  • 이벤트는 add() 메소드를 통해 실행합니다.

Event class

part of 'email_text_input_bloc.dart';


sealed class EmailTextInputEvent {}

class EmailTextInputInitialEvent extends EmailTextInputEvent {}

class EmailTextInputChangedEvent extends EmailTextInputEvent {
  //파라미터 정의
  final String email;

  EmailTextInputChangedEvent(this.email);
}

State class

import 'package:equatable/equatable.dart';
import 'package:yir_formz/yir_formz.dart';
import 'package:formz/formz.dart';


sealed class EmailTextInputState {}

final class EmailTextInputInitialState extends EmailTextInputState {}

final class EmailTextInputChangedState extends EmailTextInputState
    with EquatableMixin {
  final Email email;
  final FormzSubmissionStatus status;

  EmailTextInputChangedState({
    this.email = const Email.pure(),
    this.status = FormzSubmissionStatus.initial,
  });

  
  List<Object?> get props => [
        email,
        status,
      ];
}

state 클래스는 반드시 Equatable을 상속받는 습관을 들여야 합니다.

Last Updated:
Contributors: RiGang