Flutter – Set Country Code Before the Phone Number

Flutter is the platform where we can make a multi-platform application that is widely used to make applications in India as well as out of India also. To make your app for multiple countries you may be required to add a phone textformfield with a country code selector. For every country there is a different country code for India it is +91 and we have a mobile number of 10 digits. It is much more difficult to cover all country’s codes. So here we have come up with an amazing solution with just a few steps. Now let us see how it will look like

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add this package to your package

intl_phone_field: ^3.1.0

For the updated version you can refer here.

Step 3: Add this code where you want to make this field

Dart

IntlPhoneField(
              flagsButtonPadding: const EdgeInsets.all(8),
              dropdownIconPosition: IconPosition.trailing,
          decoration: const InputDecoration(
          labelText: 'Phone Number',
          border: OutlineInputBorder(
              borderSide: BorderSide(),
          ),
          ),
          initialCountryCode: 'IN',

          onChanged: (phone) {
          print(phone.completeNumber);
          },
      )

You can customize this as per your requirement. There are multiple properties in this that you can use to customize it just like you customize your input fields.

Let us discuss a few important properties here:

There are 4 properties for this 

1. onCountryChanged: It will call when you change the country and will return the details about the country like flags, code, name, and all.
2. onSaved: It will call when you tried to save the input from the keyboard. It will work the same as it works in textfield, textformfield. The only difference is this It will return the phone number countrycode with phonenumber as Datatype, not as String.
3. onSubmitted: It will call when you submit the textfield from the keyboard, just it will give you a number entered not with the country code. Same work as in textfield.
4. onTap: It will call when you tap on the widget we have added in step 3.
5. onChanged: This method is called when you change the country code or type the mobile number. It will also give you a complete phone number with country code like in onSaved method.
6. initialCountryCode: It will take the country code that you want to use by default. Just like for India, it is IN. Please note that pass the country code in uppercase only. Otherwise, it will take a default country code i.e +93 (Afghanistan).
7. dropdownIconPosition It will take only 2 values either IconPosition.trailing or IconPosition.leading. By default, it is IconPosition.leading.
8. dropdownIcon: It will take IconData as a value It may be any type of icon.

And there are many more to go you can check it when you use this widget.

Output:

1. Initial Stage

2. When you try to change the country code