What is International phone field in flutter?

Question

What is international phone field? Example of a international phone field in flutter. What are the possible parameters? How to apply international phone field in flutter for a login page?

Answer 1

A customised Flutter TextFormField to input international phone number along with country code.This widget can be used to make customised text field to take phone number input for any country along with an option to choose country code from a dropdown.

To apply intl_phone_field do the following. Add this to the pubspec.yaml in the dependencies:

    intl_phone_field: ^3.0.1

Import the following package:

   import'package:intl_phone_field/intl_phone_field.dart';

Add this code:

   Container(
                  padding: const EdgeInsets.all(8),
                  height: 80,
                  child:IntlPhoneField(
                    decoration: const InputDecoration(
                      counter: Offstage(),
                      labelText: 'Mobile Number',
                      border: OutlineInputBorder(
                        borderSide: BorderSide(),
                  ),
                ),
                initialCountryCode: 'IN',
                showDropdownIcon: true,
                dropdownIconPosition:IconPosition.trailing,
                onChanged: (phone) {
                  print(phone.completeNumber);
                },
              ),),

The dropdownIconPosition:IconPosition.trailing, is to shift the dropdown icon to the right. The default position of the dropdown icon is on left.

This are the parameters we can apply in intl_phone_field

    InternationalPhoneNumberInput({
Key key,
  this.selectorConfig = const SelectorConfig(),
  @required this.onInputChanged,
  this.onInputValidated,
  this.onSubmit,
  this.onFieldSubmitted,
  this.validator,
  this.onSaved,
  this.textFieldController,
  this.keyboardAction,
  this.keyboardType = TextInputType.phone,
  this.initialValue,
  this.hintText = 'Phone number',
  this.errorMessage = 'Invalid phone number',
  this.selectorButtonOnErrorPadding = 24,
  this.spaceBetweenSelectorAndTextField = 12,
  this.maxLength = 15,
  this.isEnabled = true,
  this.formatInput = true,
  this.autoFocus = false,
  this.autoFocusSearch = false,
  this.autoValidateMode = AutovalidateMode.disabled,
  this.ignoreBlank = false,
  this.countrySelectorScrollControlled = true,
  this.locale,
  this.textStyle,
  this.selectorTextStyle,
  this.inputBorder,
  this.inputDecoration,
  this.searchBoxDecoration,
  this.textAlign = TextAlign.start,
  this.textAlignVertical = TextAlignVertical.center,
  this.scrollPadding = const EdgeInsets.all(20.0),
  this.focusNode,
  this.cursorColor,
  this.autofillHints,
  this.countries
});