A flutter package to select a country from a list of countries.

Overview

Country picker

pub package

A flutter package to select a country from a list of countries.

n1

Getting Started

Add the package to your pubspec.yaml:

country_picker: ^2.0.10

In your dart file, import the library:

import 'package:country_picker/country_picker.dart';

Show country picker using showCountryPicker:

showCountryPicker(
  context: context,
  showPhoneCode: true, // optional. Shows phone code before the country name.
  onSelect: (Country country) {
    print('Select country: ${country.displayName}');
  },
);

For localization:

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

MaterialApp(
      supportedLocales: [
        const Locale('en'),
        const Locale('el'),
        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // Generic Simplified Chinese 'zh_Hans'
        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // Generic traditional Chinese 'zh_Hant'
      ],
      localizationsDelegates: [
        CountryLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: HomePage(),
 );

Parameters:

  • onSelect: Called when a country is selected. The country picker passes the new value to the callback (required)
  • onClosed: Called when CountryPicker is dismissed, whether a country is selected or not (optional).
  • showPhoneCode: Can be used to show phone code before the country name.
  • searchAutofocus Can be used to initially expand virtual keyboard
  • countryListTheme: Can be used to customize the country list's bottom sheet and widgets that lie within it. (optional).
    showCountryPicker(
      context: context,
      countryListTheme: CountryListThemeData(
        flagSize: 25,
        backgroundColor: Colors.white,
        textStyle: TextStyle(fontSize: 16, color: Colors.blueGrey),
        //Optional. Sets the border radius for the bottomsheet.
          borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
        //Optional. Styles the search field.
        inputDecoration: InputDecoration(
          labelText: 'Search',
          hintText: 'Start typing to search',
          prefixIcon: const Icon(Icons.search),
          border: OutlineInputBorder(
            borderSide: BorderSide(
              color: const Color(0xFF8C98A8).withOpacity(0.2),
            ),
          ),
        ),
      ),
      onSelect: (Country country) => print('Select country: ${country.displayName}'),
    );
  • exclude: Can be used to exclude(remove) one or more country from the countries list (optional).
    showCountryPicker(
      context: context,
      exclude: <String>['KN', 'MF'], //It takes a list of country code(iso2).
      onSelect: (Country country) => print('Select country: ${country.displayName}'),
    );
  • countryFilter: Can be used to filter the countries list (optional).
    • It takes a list of country code(iso2).
    • Can't provide both exclude and countryFilter

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve country_code_picker in any way you want, make a pull request, or open an issue.

Comments
  • Styling Options

    Styling Options

    Hello, @Daniel-Ioannou 👋🏽

    I want to commend you, first of all, for your awesome package. It has come in handy in several of my projects. Here's just a token of appreciation from my end 😄

    Just added styling options for the border-radius and the search field, in case developers need to customize those. I also updated the documentation to cover the changes and corrected a few typos.

    Please let me know if any changes are required for this PR to be merged. 🙏🏽

    Thank you.

    opened by Zamorite 3
  • Parse and translate country

    Parse and translate country

    I'm working on an app that's a part of an existing system, where only the name of the country is stored in the database. I would like to be able to parse and translate this string to the localized name of the country, so that I can show the previously selected country in the app.

    This is my take on a solution, and I wondered if this is something you would want to add to the package, since the package already provides the translations.

    There are some things in there that may not be optimal, like the duplication of supported locale and mapping of translation files (see the ToDos). There may be some solution to this, but these methods are currently private or in another way not accessible inside the CountryLocalizations class. I also guess that the wrong country may be returned if two languages uses the same word for different countries. I have no idea if that might be the case.

    I've ran the worst case scenario parsing, and it seems like it takes about half a millisecond on average over 100.000 runs on my Samsung Galaxy S10+. I'm guessing that we might see a couple of milliseconds of parse time on an older device, and more if a lot of translations are added down the line. There are probably some ways to make it more efficient, but i thought that the current solution is the most user friendly. It's probably best to leave the parsing out of the build method anyways.

    Tips for changes and improvements are welcome.

    opened by tverra 3
  • Adding ICAO 9303 Nationality codes

    Adding ICAO 9303 Nationality codes

    According to Norm ICAO 9303, nationality codes are defined for machine readable documents with these specifications https://www.icao.int/publications/Documents/9303_p3_cons_en.pdf These are the codes stated in official documents MRZs.

    Added them here as this is the most prominent country picker package that I would like to use for country picking in tourist forms to be submitted to immigration services.

    opened by JSenart 2
  • World wide option

    World wide option

    As mentioned in https://github.com/Daniel-Ioannou/flutter_country_picker/discussions/57: I need "world wide" option in my app. @Daniel-Ioannou If you like it we can add it to the library.

    TODO

    • [x] Update Country.parse method to return world wide.
    • [x] Translate "World Wide" if Daniel likes it.
    opened by kuyucuburak 2
  • Set the height of bottom sheet or adapt it to content

    Set the height of bottom sheet or adapt it to content

    Hi, Great package but could you tell me if you plan to improve display by making the bottom sheet with adaptive height to content or at least being able to set the height to a specific height?

    enhancement 
    opened by davemg3 2
  • Arabic Locale

    Arabic Locale

    Hello @Daniel-Ioannou 👋🏽

    Thank you for providing this package - I've found it so awesome.

    I recently needed the Arabic locale and found that it was missing from the package, so I decided to write the code for it and submit a PR.

    Please let me know if I need to do anything else to speed up the approval and merging of this PR.

    Thank you, sir.

    localization 
    opened by Zamorite 2
  • Localizations doesn't work

    Localizations doesn't work

    Hi. I've made an app that uses localizations, as described in the Flutter docs. I've tried to run the example project, and that implementation works. However, when implemented using the official Flutter guide, it doesn't work. I've added a complete runnable project that demonstrates this issue.

    Other localized strings works as intended , but the static CountryLocalizations? of(BuildContext context) method in country_localizations.dart returns null, which means that none of the strings in the package are translated. I'm not completely sure what causes this issue, because the inner workings of the Flutter localizations still remains a mystery to me.

    An example of a workaround fould be to return CountryLocalizations(Localizations.localeOf(context)) instead of Localizations.of<CountryLocalizations>(context, CountryLocalizations), but I don't know if this comes with some kind of cost. Thoughts?

    documentation 
    opened by tverra 2
  • Removed the need of worldwide.png and changed to '🌐' emoji following …

    Removed the need of worldwide.png and changed to '🌐' emoji following …

    …the same structure as the country flags.

    Did a minor change in "lib/src/country_list_view.dart"
    Widget _flagWidget(Country country)

    As I could have problems loading the asset worldwide.png at some times I changed so worldwide as well uses emoji as the rest of the country flags.

    opened by codeItRalf 1
  • V2.0.11

    V2.0.11

    In this version:

    • Fix Eswatini name
    • Fix Italy code at Turkish localization
    • Add optional argument for showing "World Wide" option at the beginning of the list
      showCountryPicker(
        context: context,
        showWorldWide: true,
        onSelect: (Country country) => print('Select country: ${country.displayName}'),
      );
      
    opened by Daniel-Ioannou 1
  • Add static utils method for default value

    Add static utils method for default value

    Following the example of a old similar library, you can add static methods country_pickers

    Example

      Country _selectedDialogCountry = CountryPickerUtils.Utils.getCountryByIsoCode('MF');
    
      void _openCountryPickerDialog() =>  showCountryPicker(
        context: context,
        //Optional.  Can be used to exclude(remove) one ore more country from the countries list (optional).
        // exclude: <String>['KN', 'MF'],
        favorite: <String>['SE, US'],
        //Optional. Shows phone code before the country name.
        showPhoneCode: true,
        onSelect: (Country country) {
          setState(() => _selectedDialogCountry = country);
        },
        // Optional. Sets the theme for the country list picker.
        countryListTheme: CountryListThemeData(
          // Optional. Sets the border radius for the bottomsheet.
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40.0),
            topRight: Radius.circular(40.0),
          ),
          // Optional. Styles the search field.
          inputDecoration: InputDecoration(
            labelText: 'Search',
            hintText: 'Start typing to search',
            prefixIcon: const Icon(Icons.search),
            border: OutlineInputBorder(
              borderSide: BorderSide(
                color: const Color(0xFF8C98A8).withOpacity(0.2),
              ),
            ),
          ),
        ),
      );
    
       Text("+${_selectedDialogCountry.phoneCode}"), -> view user
    

    change utils

       import 'country.dart';
    import 'res/country_codes.dart';
    
    class Utils {
      static List<Country> _countryList = countryCodes.map((country) => Country.from(json: country)).toList();
    
      static String countryCodeToEmoji(String countryCode) {
        // 0x41 is Letter A
        // 0x1F1E6 is Regional Indicator Symbol Letter A
        // Example :
        // firstLetter U => 20 + 0x1F1E6
        // secondLetter S => 18 + 0x1F1E6
        // See: https://en.wikipedia.org/wiki/Regional_Indicator_Symbol
        final int firstLetter = countryCode.codeUnitAt(0) - 0x41 + 0x1F1E6;
        final int secondLetter = countryCode.codeUnitAt(1) - 0x41 + 0x1F1E6;
        return String.fromCharCode(firstLetter) + String.fromCharCode(secondLetter);
      }
    
      static Country getCountryByIsoCode(String isoCode) {
        try {
          return _countryList.firstWhere((country) => country.countryCode.toLowerCase() == isoCode.toLowerCase(),
          );
        } catch (error) {
          throw Exception("The initialValue provided is not a supported iso code!");
        }
      }
    
    }
    
    opened by Silverviql 0
  • nameLocalized throws LateInitialisationError

    nameLocalized throws LateInitialisationError

    If the country is parsed from .parse(...) or .tryParse() accessing nameLocalized throws a LateInitialisationError. Probably not an easy fix since a context is needed to get the localized name but maybe there is a way to do it.

    opened by paricleu 2
  • Support for language

    Support for language

    Is it possible to extend this project and also provide a language picker? The use case is to provide flutter app translation support by selecting a language from the picker

    opened by mazloumi 1
  • Added an include field

    Added an include field

    I came upon a scenario where I only needed to include 3 countries and didn't know how to go about it. The temporal solution was to filter out the countries which were not needed and pass it to the exclude field. It worked but I think it isn't efficient. So I just decided to add this feature.

    opened by Boanerges1996 1
  • Add latinized search on country name

    Add latinized search on country name

    Hi Daniel,

    Would it be possible to add Latinized search by country name? The https://pub.dev/packages/latinize is a good option to "to convert accents (diacritics) from strings to latin characters" before search.

    I've forked and implemented using latinize: ^0.1.0-nullsafety.0. It is doing good here! The fork is at https://github.com/cc-nogueira/flutter_country_picker.

    Thanks.

    opened by cc-nogueira 0
Releases(V2.0.19)
  • V2.0.19(Dec 17, 2022)

  • V2.0.18(Dec 2, 2022)

  • V2.0.17(Nov 8, 2022)

    In this version:

    • Add option to hide search bar
        showCountryPicker(
          context: context,
          showSearch: false,
          onSelect: (Country country) => print('Select country: ${country.displayName}'),
        );
      
    • Add searchTextStyle
        showCountryPicker(
          context: context,
          countryListTheme: CountryListThemeData(
            searchTextStyle: TextStyle( // Optional. Styles the text in the search field
              color: Colors.blue,
              fontSize: 18,
            ),
          ),
          onSelect: (Country country) => print('Select country: ${country.displayName}'),
        );
      
    • Removed the need of worldwide.png and changed to '🌍' emoji
    Source code(tar.gz)
    Source code(zip)
  • V2.0.16(Aug 24, 2022)

  • v2.0.15(May 2, 2022)

    In this version:

    • Implemented Country Service
    • Add support for German localization
    • Add favorite option.
      • Can be used to to show the favorite countries at the top of the list.
      • It takes a list of country code(iso2).
        showCountryPicker(
          context: context,
          favorite: <String>['SE', 'MC'],
          onSelect: (Country country) {
            print('Select country: ${country.displayName}');
          },
        );
        
    • Fix package assets
    Source code(tar.gz)
    Source code(zip)
  • v2.0.14(May 2, 2022)

  • V2.0.13(Apr 5, 2022)

    In this version:

    • Add getter for flag emoji in Country model
    • Add option for bottom sheet height.
      showCountryPicker(
        context: context,
        countryListTheme: CountryListThemeData(
         bottomSheetHeight: 500, // Optional. Country list modal height
        ),
        onSelect: (Country country) => print('Select country: ${country.displayName}'),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • V2.0.12(Feb 28, 2022)

  • V2.0.11(Feb 1, 2022)

    In this version:

    • Fix Eswatini name
    • Fix Italy code at Turkish localization
    • Add optional argument for showing "World Wide" option at the beginning of the list
      showCountryPicker(
        context: context,
        showWorldWide: true,
        onSelect: (Country country) => print('Select country: ${country.displayName}'),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.10(Jan 19, 2022)

  • V2.0.9(Nov 22, 2021)

  • v2.0.8(Sep 13, 2021)

    In this version:

    • Add support for Arabic localization
    • Add support for Croatian localization
    • Add options to autofocus at search TextField.
      showCountryPicker(
        context: context,
        searchAutofocus: true,
        onSelect: (Country country) => print('Select country: ${country.displayName}'),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.7(Jul 28, 2021)

  • v2.0.6(Jul 2, 2021)

  • v2.0.5(Jun 1, 2021)

    In this version:

    • Add styling options for the border-radius and the search field.
      showCountryPicker(
        context: context,
        countryListTheme: CountryListThemeData(
          // Optional. Sets the border radius for the bottomsheet.
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40.0),
            topRight: Radius.circular(40.0),
          ),
          // Optional. Styles the search field.
          inputDecoration: InputDecoration(
            labelText: 'Search',
            hintText: 'Start typing to search',
            prefixIcon: const Icon(Icons.search),
            border: OutlineInputBorder(
              borderSide: BorderSide(
                color: const Color(0xFF8C98A8).withOpacity(0.2),
              ),
            ),
          ),
        ),
        onSelect: (Country country) => print('Select country: ${country.displayName}'),
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.4(Apr 12, 2021)

  • v2.0.3(Mar 30, 2021)

  • v2.0.2(Mar 30, 2021)

  • v2.0.1(Mar 15, 2021)

    In this version:

    • Implemented country list theme
      showCountryPicker(
        context: context,
        countryListTheme: CountryListThemeData(
          flagSize: 25,
          backgroundColor: Colors.white,
          textStyle: TextStyle(fontSize: 16, color: Colors.blueGrey),
        ),
        onSelect: (Country country) {
          print('Select country: ${country.displayName}');
        },
      );
      
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Mar 9, 2021)

  • v1.1.4(Feb 18, 2021)

  • v1.1.3(Dec 10, 2020)

  • v1.1.2(Oct 11, 2020)

    In this version:

    • Add support for Greek localization.
    • At search change contains to startsWith.
    • Add country filter option.
      • Can be used to uses filter the countries list (optional).
      • It takes a list of country code(iso2).
      • Can't provide both exclude and countryFilter
       showCountryPicker(
         context: context,
         countryFilter: <String>['AT', 'GB', 'DK', 'DE', 'FR', 'GR'], //It takes a list of country code(iso2).
         onSelect: (Country country) => print('Select country: ${country.displayName}'),
       );
      
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Sep 24, 2020)

  • v1.1.0(Sep 19, 2020)

    In this version:

    Implement localization.

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

    MaterialApp(
          supportedLocales: [
            const Locale('en'),
            const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // Generic Simplified Chinese 'zh_Hans'
            const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // Generic traditional Chinese 'zh_Hant'
          ],
          localizationsDelegates: [
            CountryLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          home: HomePage(),
     );
    

    Supported languages:

    • English
    • Simplified Chinese
    • Traditional Chinese
    Source code(tar.gz)
    Source code(zip)
  • v1.0.5(Aug 31, 2020)

  • v1.0.4(Aug 27, 2020)

  • v1.0.3(Aug 22, 2020)

  • v1.0.2(Aug 18, 2020)

    In this version:

    • Add exclude countries option.
    showCountryPicker(
       context: context,
       exclude: <String>['KN', 'MF'], //It takes a list of country code(iso2).
       onSelect: (Country country) => print('Select country: ${country.displayName}'),
    );
    
    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Aug 12, 2020)

Multi select flutter tejpal - A package for creating multi-select widgets in a variety of ways

Multi select flutter tejpal - A package for creating multi-select widgets in a variety of ways

Tejpal Singh 3 Jul 11, 2022
A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

Carlos Eugenio Torres 73 Sep 7, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
starlight_country_picker is a country picker.

Starlight Country Picker starlight_country_picker is a country picker. Features ☑️ Add New Country ☑️ Search Your Country ⭐ Our package was not used s

Ye Myo Aung 1 Nov 29, 2021
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Flutter widget form select a date in horizontal timeline with customizable styles.

Flutter widget form select a date in horizontal timeline with customizable styles. Getting Started You can use this package when you need to add a dat

Jose Manuel Márquez 158 Dec 2, 2022
Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Christoph Rothermel 4 Sep 18, 2022
A custom dropdown button lets the user select from a number of items

CircularDropDownMenu Description A custom dropdown button lets the user select from a number of items. The button shows the currently selected item as

Surya Dev Singh 2 Dec 5, 2020
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

Irfan Vigma Taufik 332 Dec 20, 2022
A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Harpreet Singh 49 Oct 7, 2021
A flutter demo app to practice List.generate with ListView.builder

ListView 3 A flutter demo app to practice List.generate with ListView.builder Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asi

Alexander Sosa 0 Jan 3, 2022
A flutter grouped list widget similar to the iOS UITableview method name.

group_tablelist A flutter grouped list widget similar to the iOS UITableview method name. Group tablelist package for Flutter. Features iOS tableview-

null 2 Aug 17, 2022
iOS-like proof of concept reorderable list with animations

Reorderable List in Flutter iOS-like proof of concept reorderable list with animations Preview Getting Started See example/lib/main.dart for example u

Matej Knopp 304 Jan 2, 2023
Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list presented as a dropdown in a dialog box or a menu.

searchable_dropdown Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list prese

Bobby Stenly Irawan 108 Sep 11, 2022
A custom Slider which accepts a list of ordered values.

MultiSlider A custom Slider which accepts a list of ordered values. It's meant to be as simple as the original Slider! UI with it Usages Continuous sl

Sthefano Schiavon 7 Dec 3, 2022
Build a grouped list, which support expand/collapse section and sticky headers, support use it with sliver widget.

sticky_and_expandable_list Flutter implementation of sticky headers and expandable list.Support use it in a CustomScrollView. README i18n:中文说明 Feature

tp7309 114 Nov 16, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 396 Mar 10, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

Hassan Ur Rahman 0 May 6, 2022