A single and customizable flutter package for international phone number input
* Added focus node
* Custom list of countries e.g. ['NG', 'GH', 'BJ' 'TG', 'CI']
* Country Flag and Logo now formatted
s/n | Constructor |
---|---|
1 | InternationalPhoneNumberInput |
2 | InternationalPhoneNumberInput.withCustomDecoration |
3 | InternationalPhoneNumberInput.withCustomBorder |
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'});
Parameter | Datatype | Initial Value | Default [1] | Decoration [2] | CustomBorder [3] |
---|---|---|---|---|---|
onInputChange | function(string) | null | ✔️ | ✔️ | ✔️ |
onInputValidated | function(string) | null | ✔️ | ✔️ | ✔️ |
focusNode | FocusNode | 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