Flutter Country Picker

Flutter CountryPicker: A Comprehensive Guide to Seamless Country Selection in Flutter Apps

by

In today’s globally connected world, mobile applications often need to accommodate users from various countries. Whether for user registration, shipping details, or localization preferences, selecting a country efficiently enhances user experience and app functionality. Enter the Flutter CountryPicker package — a powerful, easy-to-use Flutter widget that simplifies country selection in your apps.

This article explores the Flutter CountryPicker package, its features, integration steps, customization options, and how it helps developers build user-friendly apps with global reach.

What is Flutter CountryPicker?

Flutter CountryPicker is a Dart package designed to provide a customizable widget for country selection in Flutter applications. It presents users with a scrollable list of countries, often alongside country flags, country dialing codes, and search functionality, making it quick and intuitive to find and select a country.

The package supports various customization options such as filtering countries, excluding specific countries, showing phone codes, and theming the picker dialog to match your application’s design. This makes it an indispensable component when building apps that require accurate country input.

Key Features of Flutter CountryPicker

  • Simple Integration: Easily add the package to your Flutter project and invoke the country picker dialog with minimal code.
  • Searchable List: Users can search for countries by name, improving usability especially when the list is long.
  • Phone Code Support: Optionally display country dialing codes alongside country names to aid phone number inputs.
  • Customizable Lists: Exclude or filter the countries shown in the picker based on your app requirements.
  • UI Theming: Customize the appearance of the picker dialog including background color, borders, input decorations, and text styles.
  • Callbacks: React to user selection with callback functions to update UI or app state dynamically.
  • Localization Support: Cater to international audiences by adapting the UI and country names accordingly.

How to Integrate Flutter CountryPicker

Getting started with Flutter CountryPicker is hassle-free. Follow these simple steps:

  1. Add the Dependency

In your project’s pubspec.yaml file, add:

dependencies:
  flutter:
    sdk: flutter
  country_picker: ^latest_version

Run the command flutter pub get to fetch the package.

2. Import Package

In the Dart file where you want to use the picker, import it:

import 'package:country_picker/country_picker.dart';
  1. Show Country Picker Dialog

Create a button or form field to trigger the country picker dialog, using:

void showCountryPickerDialog(BuildContext context) {
  showCountryPicker(
    context: context,
    showPhoneCode: true, // optional
    onSelect: (Country country) {
      print('Selected country: ${country.displayName}');
      // Update UI or model with selected country
    },
  );
}

Then, call this function from a button’s onPressed or any event handler.

Customization and Advanced Usage

Flutter CountryPicker offers various parameters to tailor the picker for your needs:

  • Filtering Countries: Limit the picker to specific countries using the countryFilter parameter.
showCountryPicker(
  context: context,
  countryFilter: ['US', 'IN', 'GB'],
  onSelect: (country) {},
);

Excluding Countries: Omit countries from the list using the exclude parameter.

showCountryPicker(
  context: context,
  exclude: ['AF', 'BR'],
  onSelect: (country) {},
);

Note: exclude and countryFilter cannot be used simultaneously.

  • Theming the Picker Dialog: Customize colors, fonts, input fields, and dialog shapes via countryListTheme.
showCountryPicker(
  context: context,
  countryListTheme: CountryListThemeData(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(40),
      topRight: Radius.circular(40),
    ),
    inputDecoration: InputDecoration(
      labelText: 'Search',
      prefixIcon: Icon(Icons.search),
      border: OutlineInputBorder(),
    ),
  ),
  onSelect: (country) {},
);

These options allow you to align the widget perfectly with your app’s branding and improve overall user experience.

Use Cases

  • User Registration Forms: Users can pick their country along with dialing codes when entering phone numbers.
  • Shipping or Address Inputs: Accurate country selection ensures correct shipping details.
  • Localized Content: Apps can show content or services based on user’s selected country.
  • Travel and Booking Apps: Provide easy selection from numerous countries for booking and travel management.

Conclusion

The Flutter CountryPicker package is a valuable addition for Flutter developers aiming to enhance country selection experiences in their applications. Its simplicity, rich feature set, and extensive customization options make it suitable for a wide array of apps that target international users.

By integrating Flutter CountryPicker, developers save time and effort while delivering a polished, user-friendly interface that caters to global audiences. This package complements Flutter’s cross-platform strengths by addressing a common UI requirement effectively and elegantly.

Start leveraging Flutter CountryPicker today to provide seamless country selection and boost your app’s usability and professionalism.

Leave a comment