A simple and customizable flutter package for international phone number input
* 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 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
| s/n | Constructor |
|---|---|
| 1 | InternationalPhoneNumberInput |
| 2 | InternationalPhoneNumberInput.withCustomDecoration |
| 3 | InternationalPhoneNumberInput.withCustomBorder |
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',
});| Parameter | Datatype | Initial Value | Default [1] | Decoration [2] | CustomBorder [3] |
|---|---|---|---|---|---|
| onInputChange | function(PhoneNumber) | null | ✔️ | ✔️ | ✔️ |
| onInputValidated | function(string) | null | ✔️ | ✔️ | ✔️ |
| focusNode | FocusNode | null | ✔️ | ✔️ | ✔️ |
| textFieldController | TextEditingController | TextEditingController() | ✔️ | ✔️ | ✔️ |
| onSubmit | Function() | null | ✔️ | ✔️ | ✔️ |
| keyboardAction | TextInputAction | null | ✔️ | ✔️ | ✔️ |
| countries | List | null | ✔️ | ✔️ | ✔️ |
| inputBorder | InputBorder | null | ✔️ | ❌ | ✔️ |
| inputDecoration | InputDecoration | null | ✔️ | ✔️ | ❌ |
| initialCountry2LetterCode | String | NG | ✔️ | ✔️ | ✔️ |
| hintText | String | (800) 000-0001 23 | ✔️ | ❌ | ✔️ |
| shouldParse | boolean | true | ✔️ | ✔️ | ✔️ |
| shouldValidate | boolean | true | ✔️ | ✔️ | ✔️ |
| formatInput | boolean | true | ✔️ | ✔️ | ✔️ |
| errorMessage | String | Invalid phone number | ✔️ | ❌ | ✔️ |
InternationalPhoneNumberInput(
onInputChanged: onPhoneNumberChanged,
);
InternationalPhoneNumberInput(
onInputChanged: onPhoneNumberChanged,
shouldParse: false,
);
InternationalPhoneNumberInput(
onInputChanged: onPhoneNumberChanged,
shouldParse: true,
shouldValidate: true,
initialCountry2LetterCode: 'US',
hintText: 'Insert phone number',
);
InternationalPhoneNumberInput.withCustomBorder(
onInputChanged: onPhoneNumberChanged,
inputBorder: OutlineInputBorder(),
hintText: '(100) 123-4567 8901',
initialCountry2LetterCode: 'US',
errorMessage: 'Wrong number',
);
InternationalPhoneNumberInput.withCustomDecoration(
onInputChanged: onPhoneNumberChanged,
initialCountry2LetterCode: 'US',
inputDecoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
),
);
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),
),
),
),
);
A special thanks to niinyarko
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent