FormPinField<TValue> constructor

FormPinField<TValue>({
  1. Key? key,
  2. bool keepAlive = true,
  3. int maxLength = kPinLength,
  4. int? minLength,
  5. FormController<TValue>? form,
  6. TextEditingController? controller,
  7. FormStyle? style,
  8. bool enabled = true,
  9. String? initialValue,
  10. FocusNode? focusNode,
  11. TextInputType keyboardType = TextInputType.phone,
  12. TextInputAction textInputAction = TextInputAction.done,
  13. List<TextInputFormatter>? inputFormatters,
  14. bool autocorrect = false,
  15. bool enableInteractiveSelection = false,
  16. bool readOnly = false,
  17. Iterable<String>? autofillHints,
  18. Cursor? mouseCursor,
  19. TextCapitalization textCapitalization = TextCapitalization.none,
  20. ValueChanged<String>? onChanged,
  21. ValueChanged<String>? onSubmitted,
  22. String? emptyErrorText,
  23. String? lengthErrorText,
  24. String? validator(
    1. String? value
    )?,
  25. TValue onSaved(
    1. String value
    )?,
  26. String? hintText,
  27. bool obscureText = false,
  28. bool autofocus = false,
})

Widget for Pin text field for forms.

Place under the Form that gave FormController.key, or pass FormController to form.

When FormController is passed to form, onSaved must also be passed together. The contents of onSaved will be used to save the data.

Enter the initial value given by FormController.value in initialValue.

Each time the content is changed, onChanged is executed.

When FormController.validate is executed, validation and data saving are performed.

Only when emptyErrorText is specified, emptyErrorText will be displayed as an error if no characters are entered. Only when lengthErrorText is specified, if the number of characters entered is less than minLength, it is displayed as lengthErrorText.

Other error checking is performed by specifying validator. If a string other than Null is returned in the callback, the string is displayed as an error statement. If Null is returned, it is processed as no error.

The onSubmitted process is executed when the Enter key or other keys are pressed.

If enabled is false, the text is deactivated.

If readOnly is set to true, the activation is displayed, but the text cannot be changed.

If obscureText is set to true, the input string will be hidden. Please use this function for inputting passwords, etc.

If inputFormatters is specified, it is possible to restrict the characters to be entered.

フォーム用のPinテキストフィールド用のウィジェット。

FormController.keyを与えたForm配下に配置、もしくはformにFormControllerを渡します。

formにFormControllerを渡した場合、一緒にonSavedも渡してください。データの保存はonSavedの内容が実行されます。

initialValueにFormController.valueから与えられた初期値を入力します。

内容が変更される度onChangedが実行されます。

FormController.validateが実行された場合、バリデーションとデータの保存を行ないます。

emptyErrorTextが指定されている時に限り、文字が入力されていない場合emptyErrorTextがエラーとして表示されます。 lengthErrorTextが指定されている時に限り、minLengthより入力された文字数が少ない場合lengthErrorTextとして表示されます。

それ以外のエラーチェックはvalidatorを指定することで行ないます。 コールバック内でNull以外を返すようにするとその文字列がエラー文として表示されます。Nullの場合はエラーなしとして処理されます。

Enterキーなどが押された場合の処理をonSubmittedが実行されます。

enabledがfalseになるとテキストが非有効化されます。

readOnlyがtrueになっている場合は、有効化の表示になりますが、テキストが変更できなくなります。

obscureTextがtrueになると入力された文字列が隠されます。パスワードの入力などにご利用ください。

inputFormattersが指定されると入力される文字を制限することが可能です。

Implementation

FormPinField({
  super.key,
  this.keepAlive = true,
  int maxLength = kPinLength,
  int? minLength,
  this.form,
  this.controller,
  this.style,
  super.enabled,
  String? initialValue,
  this.focusNode,
  TextInputType keyboardType = TextInputType.phone,
  TextInputAction textInputAction = TextInputAction.done,
  List<TextInputFormatter>? inputFormatters,
  bool autocorrect = false,
  bool enableInteractiveSelection = false,
  this.readOnly = false,
  Iterable<String>? autofillHints,
  Cursor? mouseCursor,
  TextCapitalization textCapitalization = TextCapitalization.none,
  ValueChanged<String>? onChanged,
  ValueChanged<String>? onSubmitted,
  String? emptyErrorText,
  String? lengthErrorText,
  String? Function(String? value)? validator,
  TValue Function(String value)? onSaved,
  String? hintText,
  bool obscureText = false,
  this.autofocus = false,
})  : assert(
        (form == null && onSaved == null) ||
            (form != null && onSaved != null),
        "Both are required when using [form] or [onSaved].",
      ),
      super(
        initialValue:
            controller != null ? controller.text : (initialValue ?? ""),
        validator: (value) {
          if (emptyErrorText.isNotEmpty && value.isEmpty) {
            return emptyErrorText;
          }
          if (lengthErrorText.isNotEmpty && minLength.def(0) > value.length) {
            return lengthErrorText;
          }
          return validator?.call(value);
        },
        onSaved: (value) {
          if (value == null) {
            return;
          }
          final res = onSaved?.call(value);
          if (res == null) {
            return;
          }
          form!.value = res;
        },
        autovalidateMode: AutovalidateMode.disabled,
        builder: (FormFieldState<String> field) {
          final _FormPinFieldState<TValue> state =
              field as _FormPinFieldState<TValue>;
          final context = state.context;
          void onChangedHandler(String value) {
            field.didChange(value);
            if (onChanged != null) {
              onChanged(value);
            }
          }

          final mainTextStyle = style?.textStyle?.copyWith(
                color: style.color,
              ) ??
              Theme.of(context).textTheme.displaySmall?.copyWith(
                    color: style?.color ??
                        Theme.of(context).textTheme.displaySmall?.color,
                  ) ??
              TextStyle(
                color: style?.color ??
                    Theme.of(context).textTheme.displaySmall?.color ??
                    Theme.of(context).textTheme.displaySmall?.color,
              );
          final subTextStyle = style?.textStyle?.copyWith(
                color: style.subColor,
              ) ??
              TextStyle(
                color: style?.subColor ??
                    style?.color?.withOpacity(0.5) ??
                    Theme.of(context)
                        .textTheme
                        .titleMedium
                        ?.color
                        ?.withOpacity(0.5),
              );
          final errorTextStyle = style?.errorTextStyle?.copyWith(
                color: style.errorColor,
              ) ??
              style?.textStyle?.copyWith(
                color: style.errorColor,
              ) ??
              TextStyle(
                color:
                    style?.errorColor ?? Theme.of(context).colorScheme.error,
              );
          final borderColor =
              style?.borderColor ?? Theme.of(context).dividerColor;

          return Container(
            alignment: style?.alignment,
            padding:
                style?.padding ?? const EdgeInsets.symmetric(vertical: 16),
            child: SizedBox(
              height: style?.height,
              width: style?.width,
              child: UnmanagedRestorationScope(
                bucket: field.bucket,
                child: PinInputTextField(
                  pinLength: maxLength,
                  controller: state._effectiveController,
                  focusNode: state._effectiveFocusNode,
                  decoration: BoxLooseDecoration(
                    errorText: state.errorText,
                    hintText: hintText,
                    errorTextStyle: errorTextStyle,
                    hintTextStyle: subTextStyle,
                    obscureStyle: ObscureStyle(isTextObscure: obscureText),
                    strokeColorBuilder: FixedColorBuilder(borderColor),
                    bgColorBuilder: FixedColorBuilder(
                      style?.backgroundColor ??
                          Theme.of(context).scaffoldBackgroundColor,
                    ),
                    textStyle: mainTextStyle,
                  ),
                  keyboardType: keyboardType,
                  textInputAction: textInputAction,
                  textCapitalization: textCapitalization,
                  autocorrect: autocorrect,
                  onChanged: onChangedHandler,
                  onSubmit: onSubmitted,
                  inputFormatters: inputFormatters,
                  enabled: enabled,
                  enableInteractiveSelection: enableInteractiveSelection,
                  autofillHints: autofillHints,
                  cursor: mouseCursor,
                ),
              ),
            ),
          );
        },
      );