Revision history [back]

You can achieve this by using the 'intlphonefield' package.

Here are the steps to add a country picker to a Flutter mobile text field:

1. Add the 'intlphonefield' package to your project by adding the following line to your pubspec.yaml file:

   dependencies:
    intl_phone_field: ^0.1.4
   

2. Run 'flutter pub get' to install the package.

3. Import the package in the file where you want to use it:

   import 'package:intl_phone_field/intl_phone_field.dart';
   

4. Create a new 'IntlPhoneField' widget and add it to your widget tree. You can customize the widget by changing the properties like decoration, initialValue, etc. Here's an example:

   IntlPhoneField(
    decoration: InputDecoration(
      labelText: 'Phone number',
      border: OutlineInputBorder(
        borderSide: BorderSide(),
      ),
    ),
    initialCountryCode: 'US',
    onChanged: (phone) {
      print(phone.completeNumber);
    },
   )
   

   This will create a text field with a country picker. The 'initialCountryCode' property sets the default country code to be displayed in the picker. The 'onChanged' callback will be called whenever the user enters or changes a phone number in the text field.

5. Save the file and run the app to see the country picker in action.