niinyarko / flutter-international-phone-input Goto Github PK

View Code? Open in Web Editor NEW

62.0 5.0 72.0 610 KB

International Phone Number Input For Flutter

License: MIT License

Dart 80.69% Java 1.47% Objective-C 2.90% Shell 1.90% Ruby 13.05%

flutter-international-phone-input's Introduction

international_phone_input

International Phone Number Input For Flutter

Usage

Just put the component in your application.

import 'package:international_phone_input/international_phone_input.dart';

String phoneNumber;
String phoneIsoCode;

void onPhoneNumberChange(String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
       phoneNumber = number;
       phoneIsoCode = isoCode;
    });
}

// Default Widget with dropdown list
@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1']
       ),
     ),
 );

// Widget with text input only

 onValidPhoneNumber(
      String number, String internationalizedPhoneNumber, String isoCode) {
    setState(() {
      confirmedNumber = internationalizedPhoneNumber;
    });
  }

@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child:  InternationalPhoneInputText(
         onValidPhoneNumber: onValidPhoneNumber,
        ),
     ),
 );

// Widget with decoration
// Using decoration overwrites other styles such as hintStyle, hintText, etc.

@override
 Widget build(BuildContext context) => Scaffold(
     body: Center(
       child: InternationalPhoneInput(
          decoration: InputDecoration.collapsed(hintText: '(416) 123-4567'),
          onPhoneNumberChange: onPhoneNumberChange, 
          initialPhoneNumber: phoneNumber,
          initialSelection: phoneIsoCode,
          enabledCountries: ['+233', '+1'],
          showCountryCodes: false
       ),
     ),
 );

Customization

Here is a list of properties available to customize the widget:

Name	Type	Description
initialPhoneNumber	String	used to set initial phone number
initialSelection	String	used to set initial country code
errorText	String	use this to set an error message
hintText	String	sets hint
labelText	String	sets label
errorStyle	TextStyle	style applied to error message
hintStyle	TextStyle	style applied to hint
labelStyle	TextStyle	style applied to label
errorMaxLines	int	the maximum number of lines user can type
enabledCountries	List	the list of enabled countries to display
decoration	InputDecoration	decoration applied to the TextField widget
showCountryCodes	bool	shows the country code (default true)
showCountryFlags	bool	shows. the country flags (default true)
dropdownIcon	Widget	use this to customize dropdown icon

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve international_phone_input in any way you want, make a pull request, or open an issue.

flutter-international-phone-input's People

Contributors

Stargazers

Watchers

flutter-international-phone-input's Issues

Issue in debug mode

when i am running my app in debug mode. I am getting following error

`The following NoSuchMethodError was thrown while dispatching notifications for TextEditingController:
The getter 'code' was called on null.
Receiver: null
Tried calling: code

When the exception was thrown, this was the stack
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1 _InternationalPhoneInputState._validatePhoneNumber
package:international_phone_input/src/international_phone_input.dart:127
#2 ChangeNotifier.notifyListeners
package:flutter/…/foundation/change_notifier.dart:207
#3 ValueNotifier.value=
package:flutter/…/foundation/change_notifier.dart:274
#4 EditableTextState._value=
package:flutter/…/widgets/editable_text.dart:1459
...
The TextEditingController sending notification was: TextEditingController#3cc2e(TextEditingValue(text: ┤9├, selection: TextSelection(baseOffset: 1, extentOffset: 1, affinity: TextAffinity.downstream, isDirectional: false), composing: TextRange(start: -1, end: -1)))`

Phone number printing old value after deleting last digit

The phone number prints correctly once it is verified. However if I delete a single digit from the phone number so that it is no longer valid, onPhoneNumberChange runs twice. First an empty string is printed (as expected) but right after that it prints the entire number as if nothing was deleted from the end. Here's my method

void onPhoneNumberChange(String number, String internationalizedPhoneNumber, String isoCode) {
setState(() {
      phoneNumber = internationalizedPhoneNumber;
      print(number);
    });
  }

InternationalPhoneInput(
          onPhoneNumberChange: onPhoneNumberChange,
          initialPhoneNumber: phoneNumber,
          initialSelection: 'US',
        ),

MIssing<> get user Input of the country code ?

Search and Sort functionality required

Hi, please provide this sorting functionality or search functionality for countries, it will be difficult to user to scroll through all the countries. Right now, the sorting is based on country names but we are not displaying country names. At least, give option to display country name.
thanks.

Trinidad And Tobago case

I was validating a number from Trinidad and Tobago, the country code is +1, but to call you have to use +1868, so if I put the remaining 7 digits it shows the invalid format error, what can I do?
Thanks in advance

Invalid

Valid

No setea el valor del border.

adding fillColor & filled to Textfields

Hello,
thanks for the component, it is great!
I would like to add these properties to the TextFields

**[fillColor, Opacity, and filled]

InputDecoration(
fillColor: Colors.transparent.withOpacity(0.5),
filled:true,**

can you add it or if i do it on a branch will you merge it into the package? I dont have much experience with contributing!

Thanks :)

Andy ink

Style property on textfield not exposed

can you please expose the style property on the textField? I needed to customise the phone text

Try to preselect country code based on geolocation / locale?

Would be nice to detect location with the locator / geolocation / locale package, and preselect country code based on the results.

Null Safety

migrate this pub in null safety.

if you are not interested in null safety, please declare in pub.dev for no longer provide null safety

Thank You

Show a countries that i want to show

Hi, your library very nice.. but how i can show a few country in dropdown? not displaying all countries only a few that I want to show
Thank you,

Hi ! How to retrieve the value of the selected country ?

Thank for the awesome work on this plugin.
I want to get the value of the selected country when it change.
How can i achieve this ?

Plugin version : ^0.7.0+1

No labelText Option

I would like to add a label to the TextField widget in the InternationalPhoneInput widget. Allowing a positional parameter to pass in an optional labelText would add this feature quite easily

Also show country name next to flag?

Would be nice to see country names as well.

Unrecognized mobile code (788) for Zimbabwe

+263 as the country code, this mobile number 788930137 is not recognized.

No disposal of Text Editing controller in International Phone Input file

There is no overridden dispose method in International Phone Input which can cause disposal of Text editing controller. Please add the same :)

no keyboard on iOS emulator

how can I input phone number ?

How could I set the fillColor for flag box?

Please refer screenshot, I want to set fillColor to flag box as the same as input ones, but I didn't find any api for this, would you please help?

Thanks in advance!

Set State issue

I am getting this error " Unhandled Exception: setState() called after dispose(): _InternationalPhoneInputState#a2d65 "
how can I solve this?

Previous answer issue

Gives last user input when a number in textFeild is one number less than the required size && this happens when back button in
the phone is pressed instead of the tick button on the keyboard.
That is even if the TextFeild has only 9 letters we get an output of 10 that is the previous valid one which is kind of an Error for validation
(NB: New to flutter, so I can't say am right, correct me if am wrong )

Move test under dev_dependencies

The test dependency should be moved from dependencies to dev_dependencies. (Isn't it only for testing, and not a runtime dependency?)

Controlling max characters would be super useful

It would be super useful to limit the number of digits that can be inputted into the field.
like

TextField(
  maxLength: widget.maxDigits??null,
)

I know the code but I have never contributed before. Please, someone, add this functionality or help me do it.

Option for phone validation

User wants an option for using phone validation. There might be a case to input custom numbers that may not be able to validate by this plugin.

onValidPhoneNumber

How do I make sure that the number phone is correct and not empty in method InternationalPhoneInput ?

Add Focus Node to Mobile Field

There is no way one can determine when the field is focused or request focus on the field without doing much. I would suggest this attribute passed on through a property or some sort.

Phone number validation doesn't works in web

onInputValidated alway returns false

the onInputValidated function always returns false, even if the phone number is correct.

No TextEditingController parameter

Is there a way to pass TextEditingController into InternationalPhoneInput?
I would like to be able to change the text inside.

Suggestions ..

try to make (const widgets list of the countries) instead of building (the countries list) every time we press the button , it will make the plugin very fast , and improve the performance of the app ..
add auto detect country code using (Location service) .. , i can help .., but i never developed a plugin , and don't know how to upload it ..
in the filed using this code will deted the system country code (imported from dart:io package)
initialCountry2LetterCode: Platform.localeName.split('_')[1].toString()

Search Bar on Country Code

Hello brother,
I'm very appreciative to use your library, it's very convenient and useful.
But I have a problem when I use your library, can you help me fix it? Thanks a lot.
I'm quite hard to find my country on your drop down list, so I think that if you can add search bar on country finding drop down list, it will help better user experience.
Thanks for reading my issue.
Best regards,
Thank you.

 List<Placemark> p = await geolocator.placemarkFromCoordinates(
          _currentPosition.latitude, _currentPosition.longitude);
      Placemark place = p[0];
      setState(() {
        countryCode = place.isoCountryCode;
      });

InternationalPhoneInput(
             onPhoneNumberChange: _onPhoneNumberChanged,
             initialSelection: countryCode,
             errorText:"Please type a valid phone number",
             errorMaxLines:4,
           ),);

adding +47 gives multiple duplicates

                        InternationalPhoneInput(
                          onPhoneNumberChange: onPhoneNumberChange,
                          initialPhoneNumber: phoneNumber,
                          initialSelection: phoneIsoCode,
                          enabledCountries: ['+46', '+47'],
                        ),

will give me 3 flags of norway

Dark mode support

just replace Colors.white in input_widget.dart ...

with this:
MediaQuery.of(context).platformBrightness == Brightness.dark ? Color(0xff212121) : Colors.white

for dark mode ..