country_picker_pro 0.0.5 copy "country_picker_pro: ^0.0.5" to clipboard
country_picker_pro: ^0.0.5 copied to clipboard

The country_picker_pro Flutter package provides a customizable Country Selector widget, enabling users to select countries with detailed information and customization options.

Country Picker Pro #

The country_picker_pro package provides a customizable Country Selector widget for Flutter applications.

pub package

Features #

  • Country Selection: Select a country from a list of countries.
  • Preferred Countries: Display preferred countries at the top of the list.
  • Phone Codes: Show phone codes for each country.
  • Customization: Customize the appearance of the widget.
  • Alphabetical Tap to Search: Quickly search for countries by tapping on an alphabet, similar to contact lists.

Screenshots #

Screenshot 1 Screenshot 2 Screenshot 3
Screenshot 4 Screenshot 5 Screenshot 6

Installation #

Add country_picker_pro to your pubspec.yaml file:

dependencies:
  country_picker_pro: ^0.0.5
copied to clipboard

Usage #

Import the package:

import 'package:country_picker_pro/country_picker_pro.dart';
copied to clipboard

Use the CountrySelector widget to integrate the country selector into your app:

CountrySelector(
   context: context,
   countryPreferred: <String>['US'],
   showPhoneCode: true,
   appBarTitle: "Select Country",
   onSelect: (Country country) {
     // Handle selected country
   },
   // Add customization options here
);
copied to clipboard

Customization Options #

  • listType: The type of list to display (ListType.list or ListType.grid).
  • appBarBackgroundColour: The background color of the app bar.
  • appBarFontSize: The font size of the app bar title.
  • appBarFontStyle: The font style of the app bar title.
  • appBarFontWeight: The font weight of the app bar title.
  • appBarTextColour: The text color of the app bar title.
  • appBarTextCenterAlign: Whether the app bar title should be centered.
  • backgroundColour: The background color of the country selector widget.
  • backIcon: The icon to use for the back button in the app bar.
  • backIconColour: The color of the back button icon.
  • countryFontStyle: The font style of the country names in the list.
  • countryFontWeight: The font weight of the country names in the list.
  • countryTextColour: The text color of the country names in the list.
  • countryTitleSize: The font size of the country names in the list.
  • dividerColour: The color of the divider between countries in the list.
  • searchBarAutofocus: Whether the search bar should autofocus.
  • searchBarIcon: The icon to use for the search bar.
  • searchBarBackgroundColor: The background color of the search bar.
  • searchBarBorderColor: The border color of the search bar.
  • searchBarBorderWidth: The border width of the search bar.
  • searchBarOuterBackgroundColor: The outer background color of the search bar.
  • searchBarTextColor: The text color of the search bar.
  • searchBarHintColor: The hint text color of the search bar.
  • countryTheme: Additional theme customization options.
  • showSearchBox: Whether to show the search box.

Country Details #

The CountrySelector widget provides detailed information about each country, including:

  • e164_cc: The e164 country code (e.g., 1 for the United States).
  • iso2_cc: The ISO 3166-1 alpha-2 country code (e.g., US for the United States).
  • e164_sc: The e164 subdivision code.
  • geographic: Indicates if the country is geographically defined.
  • level: The country's administrative level.
  • name: The name of the country (e.g., United States).
  • example: An example phone number for the country (e.g., 2012345678 for the United States).
  • display_name: The display name of the country, including the ISO code and phone code (e.g., United States (US) [+1]).
  • full_example_with_plus_sign: The full example phone number including the plus sign (e.g., +12012345678 for the United States).
  • display_name_no_e164_cc: The display name of the country without the e164 country code (e.g., United States (US)).
  • e164_key: The e164 key for the country (e.g., 1-US-0 for the United States).
  • capital: The capital city of the country (e.g., Washington, D.C. for the United States).
  • language: The official languages of the country (e.g., English for the United States).
  • currency: The currency used in the country, including the name, code, and symbol (e.g., US Dollar (USD) $ for the United States).
  • popular_sports: A list of popular sports in the country (e.g., American Football, Basketball, Baseball for the United States).
  • calling_code: The international calling code for the country (e.g., +1 for the United States).
  • time_zone: The time zone of the country (e.g., Multiple Time Zones for the United States).
  • region: The region of the country (e.g., Americas for the United States).
  • subregion: The subregion of the country (e.g., Northern America for the United States).
  • demonym: The demonym(resident) for people from the country (e.g., American for the United States).
  • internet_tld: The top-level domain for internet addresses from the country (e.g., .us for the United States).
  • flag_emoji: The flag emoji for the country (e.g., πŸ‡ΊπŸ‡Έ for the United States).

For localization: #

Add the CountryLocalizations.delegate in the list of your app delegates.

MaterialApp(
      supportedLocales: [
        const Locale('en'),
      ],
      localizationsDelegates: [
        CountryLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MainPage(),
 );
copied to clipboard

Example #

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 countryCode: ${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,
);
copied to clipboard
21
likes
150
points
289
downloads

Publisher

unverified uploader

Weekly Downloads

2024.10.03 - 2025.04.17

The country_picker_pro Flutter package provides a customizable Country Selector widget, enabling users to select countries with detailed information and customization options.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

collection, flutter

More

Packages that depend on country_picker_pro