Country Picker in flutter, pick country data fluently by country_picker_pro

Flutter package which is fully customizable with captures all necessary country data easily

In this article we will discuss about how we can effectively pick country data in a flutter, as we all know in most of the applications we need user details regarding to properly manage and take good experiences to the user, namely name, email, telephone number, and country details.

When it comes to name, email, and phone number, we can simply ask users to fill in the form, but when it comes to phone and country details, we have to ask and manage our user interface alone. It is very hectic and a lot of code is needed to write their UI.

Obviously, this is a normal situation, and there is no good alternative available at the moment?

The good news is, we have the country_picker_pro 📦package available at the moment.

country_picker_pro | Flutter package

This package allows us to select a country code, as well as pick a country name, capital, language, currency, popular sports, time zone, region, resident, internet_tld, flag_emoji, etc.

Additionally, this package gives us complete control and customization regarding to our applications, such as changing color, alphabetically searching countries, font size, font weight, etc, according to our requirements.

In order to make this more effective, let’s see how we can customize it according to our application needs.

Let’s start by adding this to our project (.yaml),

country_picker_pro: ^0.0.3

After we add this to our project, we can customize UI and get all the features you need

CountrySelector(
    context: context,
    countryPreferred: <String>['US'],
    showPhoneCode: true,
    appBarTitle: "Select Country",
    onSelect: (Country country) {
       debugPrint('Selected country: ${country.displayName}');
       debugPrint('Selected country: ${country.displayName}');
       debugPrint('Selected country code without plus sign: ${country.phoneCode}');
       debugPrint('Select country code with plus sign: ${country.callingCode}');
       debugPrint('Select country country Code: ${country.countryCode}');
       debugPrint('Select country capital: ${country.capital}');
       debugPrint('Select country language: ${country.language}');
       debugPrint('Select country currency details: ${country.currency.toString()}');
       debugPrint('Select country popular sports: ${country.popularSports.toString()}');
       debugPrint('Select country time zone: ${country.timeZone}');
       debugPrint('Select country region: ${country.region}');
       debugPrint('Select country sub-region: ${country.subregion}');
       debugPrint('Select country place identifier: ${country.resident}');
       debugPrint('Select country Internet top-level domain: ${country.internetTld}');
       debugPrint('Select country flag emoji String: ${country.flagEmojiText}');
       debugPrint('Select country e164Sc: ${country.e164Sc}');
       debugPrint('Select country display Name No Country Code: ${country.displayNameNoCountryCode}');
       debugPrint('Select country display name: ${country.displayName}');
       debugPrint('Select country e164Key: ${country.e164Key}');
     },
   listType: ListType.list,
   appBarBackgroundColour: Colors.black,
   appBarFontSize: 20,
   appBarFontStyle: FontStyle.normal,
   appBarFontWeight: FontWeight.bold,
   appBarTextColour: Colors.white,
   appBarTextCenterAlign: true,
   backgroundColour: Colors.white,
   backIcon: Icons.arrow_back,
   backIconColour: Colors.white,
   countryFontStyle: FontStyle.normal,
   countryFontWeight: FontWeight.bold,
   countryTextColour: Colors.black,
   countryTitleSize: 16,
   dividerColour: Colors.black12,
   searchBarAutofocus: true,
   searchBarIcon: Icons.search,
   searchBarBackgroundColor: Colors.white,
   searchBarBorderColor: Colors.black,
   searchBarBorderWidth: 2,
   searchBarOuterBackgroundColor: Colors.white,
   searchBarTextColor: Colors.black,
   searchBarHintColor: Colors.black,
   countryTheme: const CountryThemeData(
   appBarBorderRadius: 10,
     ),
   showSearchBox:true,
);

So, basically we got all these optionsin terms of UI customization,

1. listType: Specifies whether the country selector widget should display a list or a grid of countries.
2. appBarBackgroundColour: Sets the background color of the app bar, which is the top bar of the app.
3. appBarFontSize: Specifies the font size of the title in the app bar.
4. appBarFontStyle: Defines the font style of the title in the app bar (e.g., normal, italic).
5. appBarFontWeight: Determines the font weight of the title in the app bar (e.g., normal, bold).
6. appBarTextColour: Sets the text color of the title in the app bar.
7. appBarTextCenterAlign: Specifies whether the title in the app bar should be centered.
8. backgroundColour: Sets the background color of the country selector widget, which is the area where the countries are listed.
9. backIcon: Specifies the icon to use for the back button in the app bar.
10. backIconColour: Sets the color of the back button icon in the app bar.
11. countryFontStyle: Defines the font style of the country names in the list (e.g., normal, italic).
12. countryFontWeight: Determines the font weight of the country names in the list (e.g., normal, bold).
13. countryTextColour: Sets the text color of the country names in the list.
14. countryTitleSize: Specifies the font size of the country names in the list.
15. dividerColour: Sets the color of the divider between countries in the list.
16. searchBarAutofocus: Specifies whether the search bar should automatically receive focus when the widget is loaded.
17. searchBarIcon: Specifies the icon to use for the search bar.
18. searchBarBackgroundColor: Sets the background color of the search bar.
19. searchBarBorderColor: Sets the border color of the search bar.
20. searchBarBorderWidth: Sets the width of the border of the search bar.
21. searchBarOuterBackgroundColor: Sets the outer background color of the search bar.
22. searchBarTextColor: Sets the text color of the search bar.
23. searchBarHintColor: Sets the color of the hint text in the search bar.
24. countryTheme: Additional customization options for the theme of the country selector widget.

Also in terms of country detail collection, we got a lot of details that help in our project, for example, not only country code, but this package bundled with 30+ important parameters, which included a lot of parameters like, for example, selecting the US by this package, we got all these parameters.

1. e164_cc: The e164 country code is a numeric code (e.g., 1 for the United States) used in the E.164 international telephone numbering plan to uniquely identify countries.
2. iso2_cc: The ISO 3166–1 alpha-2 country code is a two-letter code (e.g., US for the United States) assigned by the International Organization for Standardization (ISO) to represent countries.
3. e164_sc: The e164 subdivision code is a numeric code that further divides countries into regions or subdivisions for telephone numbering purposes.
4. geographic: This field indicates whether the country is geographically defined, meaning it has clearly defined borders or territories.
5. level: The administrative level indicates the level of administrative division within the country, such as states, provinces, or regions.
6. name: The name of the country (e.g., United States) is the commonly recognized name used to identify the country.
7. example: An example phone number for the country (e.g., 2012345678 for the United States) demonstrates the typical format of phone numbers in that country.
8. display_name: The display name of the country includes the country’s name, ISO code, and phone code (e.g., United States (US) [+1]).
9. full_example_with_plus_sign: The full example phone number including the plus sign (e.g., +12012345678 for the United States) is a complete phone number format including the international dialing code.
10. display_name_no_e164_cc: The display name of the country without the e164 country code (e.g., United States (US)) excludes the e164 country code from the display name.
11. e164_key: The e164 key for the country (e.g., 1-US-0 for the United States) is a unique identifier that includes the e164 country code and other information.
12. capital: The capital city of the country (e.g., Washington, D.C. for the United States) is the primary city where the country’s government is located.
13. language: The official language of the country (e.g., English for the United States) is the language recognized and used by the government and institutions.
14. currency: The currency used in the country, including the name, code, and symbol (e.g., US Dollar (USD) $ for the United States), is the official monetary unit.
15. popular_sports: A list of popular sports in the country (e.g., American Football, Basketball, Baseball for the United States) highlights the sports commonly enjoyed and played in the country.
16. calling_code: The international calling code for the country (e.g., +1 for the United States) is the code required to make international calls to that country.
17. time_zone: The time zone of the country (e.g., USA (GMT-4) also Multiple Time Zones for the United States) indicates the standard time followed in that country.
18. region: The region of the country (e.g., Americas for the United States) is the broader geographical area where the country is located.
19. subregion: The subregion of the country (e.g., Northern America for the United States) is a more specific geographical area within the region where the country is located.
20. demonym: The demonym for people from the country (e.g., American for the United States) is the term used to describe individuals from that country.
21. internet_tld: The top-level domain for internet addresses from the country (e.g., .us for the United States) is the suffix used in internet addresses.
22. flag_emoji: The flag emoji for the country (e.g., 🇺🇸 for the United States) is a graphical representation of the country’s flag often used in digital communication.

In summary, the country_picker_pro plugin simplifies the transfer of country data to Flutter development by providing a comprehensive list of multiple data points. A number of essential details, such as the name of the country, capital, language, currency, popular sports, calling code, region, etc, can be collected more easily with the plugin, simplifying the process of collecting country information.

By using country_picker_pro in your Flutter projects, you will be able to collect country data accurately and efficiently as well as enhance the user experience by updating the UI according to the user application.

Furthermore, I gathered this information by researching multiple websites. Feel free to leave a comment if you encounter any incorrect or misinterpreted information.

If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

Shirsh Shukla is All about flutter 💙💙💙💙