Ask Your Question
0

How to add COUNTRY PICKER to a Flutter mobile text field?

asked 2023-06-25 12:59:03 +0000

bukephalos gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2023-06-25 13:13:01 +0000

qstack gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-06-25 12:59:03 +0000

Seen: 11 times

Last updated: Jun 25 '23