EmailTextInput

Email 입력을 위한 TextField 위젯입니다.

• email 입력에 대한 유효성 검사를 수행합니다.
• bloc를 사용하여 상태관리를 수행합니다.

사용법

1. 패키지 임포트하기:

import 'package:yir_ui/yir_ui.dart';

2. BlocProvider를 사용하여 Bloc을 등록하기:

body: BlocProvider(
        create: (context) => EmailTextInputBloc(),
        child: const SignInScreen(),
      ),

3. BlocBuilder를 사용하여 Bloc을 사용하기:

class EmailTextInput extends StatelessWidget {
  const EmailTextInput({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<EmailTextInputBloc, EmailTextInputState>(
        builder: (context, state) {
      if (state is EmailTextInputInitialState) {
        return EmaiTextInputField(
          onChanged: (email) {
            BlocProvider.of<EmailTextInputBloc>(context)
                .add(EmailTextInputChangedEvent(email));
          },
        );
      }
      if (state is EmailTextInputChangedState) {
        return EmaiTextInputField(
          errorMessage: state.status.isFailure
              ? Email.showEmailErrorMessage(state.email.error)
              : null,
          onChanged: (email) {
            BlocProvider.of<EmailTextInputBloc>(context)
                .add(EmailTextInputChangedEvent(email));
          },
        );
      } else {
        return const SizedBox.shrink();
      }
    });
  }
}

4. state데이터를 받아오기:

TextButton(
           onPressed: () {
						  // 获取EmailTextInputBloc的state。
              final currentState =
                 BlocProvider.of<EmailTextInputBloc>(context).state;
							// 根据state类型获取其实例的值。
               if (currentState is EmailTextInputChangedState) {
                      print(currentState.email.value); // Email 객체의 value 속성을 출력
                    }
                  },
                  child: const Text('Sign In')),

개발 스탭

step1: 创建Event

part of 'email_text_input_bloc.dart';

@immutable
sealed class EmailTextInputEvent {}

class EmailTextInputInitialEvent extends EmailTextInputEvent {}

class EmailTextInputChangedEvent extends EmailTextInputEvent {
  //这个是参数
  final String email;

  EmailTextInputChangedEvent(this.email);
}

常用的Event是否有 【get, create, update, delete】 呢？

step2: 创建state

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

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

这里没有创建ErrorState。因为Formz有自带的。

常用的应该有【Initial，loading，success，error】等状态state。

step3: 创建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是以Event为主线写逻辑代码。

on()

add()

emit()

step4: 注册BlocProvider

body: BlocProvider(
        create: (context) => EmailTextInputBloc(),
        child: const SignInScreen(),
      ),

step5: 调用BlocBuilder

class EmailTextInput extends StatelessWidget {
  const EmailTextInput({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<EmailTextInputBloc, EmailTextInputState>(
        builder: (context, state) {
      if (state is EmailTextInputInitialState) {
        return EmaiTextInputField(
          onChanged: (email) {
            BlocProvider.of<EmailTextInputBloc>(context)
                .add(EmailTextInputChangedEvent(email));
          },
        );
      }
      if (state is EmailTextInputChangedState) {
        return EmaiTextInputField(
          errorMessage: state.status.isFailure
              ? Email.showEmailErrorMessage(state.email.error)
              : null,
          onChanged: (email) {
            BlocProvider.of<EmailTextInputBloc>(context)
                .add(EmailTextInputChangedEvent(email));
          },
        );
      } else {
        return const SizedBox.shrink();
      }
    });
  }
}

BlocBuilder是以状态state为主线写代码。

登入页面-点击登入按钮时

TextButton(
           onPressed: () {
						  // 获取EmailTextInputBloc的state。
              final currentState =
                 BlocProvider.of<EmailTextInputBloc>(context).state;
							// 根据state类型获取其实例的值。
               if (currentState is EmailTextInputChangedState) {
                      print(currentState.email.value); // Email 객체의 value 속성을 출력
                    }
                  },
                  child: const Text('Sign In')),

通过这种方法就能获取到email值。