Intl Phone Number Input

A simple and customizable flutter package for international phone number input

What's new

* onInputChanged now returns a new PhoneNumber Model
* You can create a PhoneNumber object from PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode]); 
* You can now parse phoneNumber by calling   PhoneNumber.getParsableNumber(String phoneNumber, String isoCode) or `PhoneNumber Reference`.parseNumber()
* Custom list of countries e.g. ['NG', 'GH', 'BJ' 'TG', 'CI']

    String phoneNumber =  '+234 500 500 5005';
    PhoneNumber number = await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber);
    String parsableNumber = number.parseNumber();
    `controller reference`.text = parsableNumber

Note

    PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode])

Could throw an Exception if the phoneNumber isn't recognised its a good pattern to pass the country's isoCode or have '+' at the beginning of the string

Usage

Constructors

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

Available Parameters

InternationalPhoneNumberInput({
    @required this.onInputChanged,
    this.onInputValidated,
    this.focusNode,
    this.textFieldController,
    this.onSubmit,
    this.keyboardAction,
    this.countries,
    this.inputBorder,
    this.inputDecoration,
    this.initialCountry2LetterCode = 'NG',
    this.hintText = '(800) 000-0001 23',
    this.shouldParse = true,
    this.shouldValidate = true,
    this.formatInput = true,
    this.errorMessage = 'Invalid phone number',
    });
ParameterDatatypeInitial ValueDefault 1Decoration 2CustomBorder 3
onInputChangefunction(PhoneNumber)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:
textFieldControllerTextEditingControllerTextEditingController():heavy_check_mark::heavy_check_mark::heavy_check_mark:
onSubmitFunction()null:heavy_check_mark::heavy_check_mark::heavy_check_mark:
keyboardActionTextInputActionnull: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

Dart

VM

dart:ffi
Foreign Function Interface for interoperability with the C programming language. [...]

Web

dart:html
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
dart:js
Low-level support for interoperating with JavaScript. [...]
dart:js_util
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.