Intl Phone Number Input

A single and customizable flutter package for international phone number input

What's new

* Added focus node
* Custom list of countries e.g. ['NG', 'GH', 'BJ' 'TG', 'CI']
* Country Flag and Logo now formatted

Usage

Constructors

s/nConstructor
1InternationalPhoneNumberInput
2InternationalPhoneNumberInput.withCustomDecoration
3InternationalPhoneNumberInput.withCustomBorder

Available Parameters

InternationalPhoneNumberInput({
@required onInputChange,
      onInputValidated,
      focusNode,
      countries,
      inputBorder,
      inputDecoration,
      initialCountry2LetterCode = 'NG',
      hintText = '(800) 000-0001 23',
      shouldParse = true,
      shouldValidate = true,
      formatInput = true,
      errorMessage = 'Invalid phone number'});
ParameterDatatypeInitial ValueDefault 1Decoration 2CustomBorder 3
onInputChangefunction(string)null:heavy_check_mark::heavy_check_mark::heavy_check_mark:
onInputValidatedfunction(string)null:heavy_check_mark::heavy_check_mark::heavy_check_mark:
focusNodeFocusNodenull:heavy_check_mark::heavy_check_mark::heavy_check_mark:
countriesListnull:heavy_check_mark::heavy_check_mark::heavy_check_mark:
inputBorderInputBordernull:heavy_check_mark::x::heavy_check_mark:
inputDecorationInputDecorationnull:heavy_check_mark::heavy_check_mark::x:
initialCountry2LetterCodeStringNG:heavy_check_mark::heavy_check_mark::heavy_check_mark:
hintTextString(800) 000-0001 23:heavy_check_mark::x::heavy_check_mark:
shouldParsebooleantrue:heavy_check_mark::heavy_check_mark::heavy_check_mark:
shouldValidatebooleantrue:heavy_check_mark::heavy_check_mark::heavy_check_mark:
formatInputbooleantrue:heavy_check_mark::heavy_check_mark::heavy_check_mark:
errorMessageStringInvalid phone number:heavy_check_mark::x::heavy_check_mark:

Examples

InternationalPhoneNumberInput(
 onInputChanged: onPhoneNumberChanged,
);

Media 1|100x200,20%

InternationalPhoneNumberInput(
  onInputChanged: onPhoneNumberChanged,
  shouldParse: false,
  );

Media 2

InternationalPhoneNumberInput(
  onInputChanged: onPhoneNumberChanged,
  shouldParse: true,
  shouldValidate: true,
  initialCountry2LetterCode: 'US',
  hintText: 'Insert phone number',
  );

Media 3

InternationalPhoneNumberInput.withCustomBorder(
  onInputChanged: onPhoneNumberChanged,
  inputBorder: OutlineInputBorder(),
  hintText: '(100) 123-4567 8901',
  initialCountry2LetterCode: 'US',
  errorMessage: 'Wrong number',
);

Media 4

InternationalPhoneNumberInput.withCustomDecoration(
  onInputChanged: onPhoneNumberChanged,
  initialCountry2LetterCode: 'US',
  inputDecoration: InputDecoration(
    border: OutlineInputBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(40),
      ),
    ),
  ),
);

Media 4

InternationalPhoneNumberInput.withCustomDecoration(
  onInputChanged: onPhoneNumberChanged,
  onInputValidated: onInputChanged,
  initialCountry2LetterCode: 'US',
  inputDecoration: InputDecoration(
    hintText: 'Enter phone number',
    errorText: valid ? null : 'Invalid',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(40),
      ),
    ),
  ),
);

Media 6

Dependencies

Credits

A special thanks to niinyarko

Libraries

intl_phone_number_input