dseparate_phone_number_input

This is an input box that automatically separates the phone number.

UI display

empty input normal input
empty input normal input

Usage

To use this plugin, add dseparate_phone_number_input as a dependency in your pubspec.yaml file.

available parameters

PhoneNumInput({
  Key? key,
  this.width,
  this.margin,
  this.hintText,
  this.hintStyle,
  this.helperText,
  this.helperStyle,
  this.style,
  this.clearBtn,
  this.clearBtnSize = defaultClearBtnSize,
  this.clearBtnMaxSize = defaultClearBtnMaxSize,
  this.inputBorderSideWidth = defaultInputBorderSideWidth,
  required this.controller,
  this.focusNode,
  this.onNumInputComplete,
  this.onChanged,
  this.textInputAction = TextInputAction.next,
  this.onEditingComplete,
  this.isShowErrorState = false,
  this.isShowHelperText = false,
  this.isShowInputBorder = true,
  this.helperTextSyncErrorState = false,
}) : super(key: key);

special field instructions

property description default
isShowErrorState whether to show error state false
isShowHelperText whether to show helper text false
isShowInputBorder whether to show input box border true
helperTextSyncErrorState whether the Helper text is synchronized with the error state false

example

  • error input (helper text not sync)

    PhoneNumInput(
      helperText: "unregistered phone numbers automatically create accounts",
      controller: _phoneController,
      focusNode: _focusNode,
      isShowHelperText: true,
      isShowErrorState: true,
      onNumInputComplete: (result) => print("the phone number is entered"),
      onEditingComplete: () => print("complete editing"),
    )
    

    err not sync input

  • helper text sync error state

    PhoneNumInput(
      helperText: "the phone number entered was incorrect",
      controller: _phoneController,
      focusNode: _focusNode,
      isShowHelperText: true,
      isShowErrorState: true,
      helperTextSyncErrorState: true,
      onNumInputComplete: (result) => print("the phone number is entered"),
      onEditingComplete: () => print("complete editing"),
    )
    

    err input

Contributions

If you encounter any problem or the library is missing a feature feel free to open an issue. Feel free to fork, improve the package and make pull request.

License

MIT