separate_phone_number_input 0.0.2+2

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

dseparate_phone_number_input

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

UI display

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"),
  )
  

  

• 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"),
  )
  

  

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