Country List Picker for Flutter customizable country selection package with multi-languages support

CountryListPicker for Flutter customizable country selection package with multi-languages support.

Installation

Run this command:

With Flutter:

 $ flutter pub add country_list_picker

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  country_list_picker: ^1.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:country_list_picker/country_list_picker.dart'

Usage

import  'package:country_list_picker/country_list_picker.dart';
void  main() {
    //simple code
    CountryListPicker(
          onCountryChanged: ((value) {
              // do something
          }),
          onChanged: (value) {
             // do something
          },
}

Getting started

Supported 250 countries with common/offical name, iso_3166_1_alpha2, iso_3166_1_alpha3, dialing_code, default_number_length, default_number_format, local_number_sample.

Supported languages:

  • Arabic
  • Chinese
  • Croatian
  • Czech
  • English
  • Estonian
  • Finnish
  • French
  • German
  • Hungarian
  • Italian
  • Japanese
  • Korean
  • Persian
  • Polish
  • Portuguese
  • Russian
  • Slovak
  • Spanish
  • Swedish
  • Urdu

Picker Paramters

Parameter Type Default Description
onCountryChanged ValueChanged? null This is a callback function that is invoked when the selected country is changed, which can be used to access the newly selected country.
onChanged ValueChanged? null This is a callback function that is invoked when the phone number in the input field changes, which can be used to access the new phone number.
initialCountry Countries Countries.Egypt Sets the initial country that is selected when the widget is first rendered.
language Languages Languages.English Sets the display language for the widget.
textDirection TextDirection -- Sets the text direction for the widget depending on the language direction.
displayName Names Names.common Determines whether the country name displayed is common or official.
localCountry Countries null Refer to local device which will define by you.
countryNameTextStyle TextStyle TextStyle(fontSize: 15, color: Colors.grey) Text style for the country name display.
isShowFlag bool true Determines the visibility of the flag icon. A value of true will display the flag icon, while a value of false will hide it.
flagSize Size true size of the flag icon. It has a default value Size (40,40)
isShowDiallingCode bool true Determines whether the dialling code should be displayed or not. If true, the dialling code will be displayed. If false, it will be hidden.
isShowDownIcon bool true Determines whether the flag icon should be displayed or not. If true, the flag icon will be displayed. If false, it will be hidden.
isShowCountryName bool true Determines whether the country name should be displayed or not. If true, the country name will be displayed. If false, it will be hidden.
isShowInputField bool true Determines whether the phone number input field should be displayed or not. If true, the phone number input field will be displayed. If false, it will be hidden.
iconDown Icon Icon(Icons.keyboard_arrow_down, size: 24) Determines whether the dropdown arrow icon should be displayed or not. If true, the dropdown arrow icon will be displayed. If false, it will be hidden.
diallCodeStyle TextStyle TextStyle(fontSize: 16, fontWeight: FontWeight.bold) Text style for the dialling code display.
border InputBorder UnderlineInputBorder() Border of the phone number input field.
inputTheme InputThemeData See Input Paramters section Theme data for the phone number input field.
dialogTheme DialogThemeData See Dialog Paramters section Theme data for the country selection dialog.
    CountryListPicker(
        onCountryChanged: ((value) {
            // do something
        }),
        onChanged: (value) {
            // do something
        },
        initialCountry: Countries.Egypt,
        language: Languages.Arabic,
        isShowDownIcon: picker.isDownIcon,
        isShowCountryTitle: false,   // if you need to hide country title
        displayName: Names.offical,  // if you need to display country offical name
    )

Input Paramters

Parameter Type Default Description
obscureText bool false Determines if the text input should be obscured or not.
obscuringCharacter String "*" The character used to obscure the text input.
style TextStyle TextStyle(fontSize: 16) The text style for the input field.
hintText String Enter your phone number The hint text to be displayed when the input field is empty.
hintStyle TextStyle TextStyle(fontSize: 16, color: Color(0xFF9E9E9E)) text style for the hint text.
border InputBorder InputBorder.none The border style for the input field.
mask String "### #### ###" The mask used to format the text input.

you can set mask and hintString to default value of each country using onCountryChanged.

    String _hintString ="";
    String _mask ="";
    CountryListPicker(
        onCountryChanged: ((value) {
            _hintString = value.local_number_sample;
            _mask = value.default_number_format;lue
            // do something
        }),
        onChanged: (value) {
            // do something
        },
        inputTheme: InputThemeData(
            hintText: _hintString
            hintStyle: input.hintTextStyle,
            border:  InputBorder.UnderlineInputBorder
            mask: _mask,
          ),
    )

Dialog Paramters

Parameter Type Default Description
isShowFlag bool Determines whether the flag icon should be displayed. A value of true will display the flag icon, while a value of false will hide it.
isShowDiallCode bool Determines whether the dialling code should be displayed. A value of true will display the dialling code, while a value of false will hide it.
isShowFloatButton bool Determines whether the floating button should be displayed. A value of true will display the floating button, while a value of false will hide it.
isShowSearchTile bool Determines whether the search tile should be displayed. A value of true will display the search tile, while a value of false will hide it.
isShowLastPickTile bool Determines whether the last pick tile should be displayed. A value of true will display the last pick tile, while a value of false will hide it.
isShowAlphabetsBar bool Determines whether the alphabets bar should be displayed. A value of true will display the alphabets bar, while a value of false will hide it.
backgroundColor Color background color for the dialog.
textStyle TextStyle text style for the text displayed in the dialog. The default value is TextStyle(fontSize: 16).
appBar PreferredSizeWidget Appbar dialog to be displayed on top of the screen.
tileHeight double height of the tiles. The default value is 50
alphabetsBarTheme AlphabetsBarThemeData theme data for the alphabets bar.
tilesTheme TilesThemeData theme data for the tiles.
    CountryListPicker(
        onCountryChanged: ((value) {
            // do something
        }),
        onChanged: (value) {
            // do something
        },
        dialogTheme: DialogThemeData(
            isShowFlag: false,          // <- hide dialog flags 
            isShowDialCode: false,      // <- hide dial code 
            isShowFloatButton: false,   // <- hide float button 
            isShowSearchTile: false,    // <- hide search tile 
            isShowLastPickTile: false,  // <- hide last pick tile
            isShowAlphabetsBar: false,  // <- hide alphabets bar 
    )

Alphabets Paramters

Parameter Type Default Description
backgroundColor Color Colors.transparent The background color of unselected alphabet item
style TextStyle TextStyle(fontSize: 12) The text style of the alphabet item text.
selectedBackgroundColor Color Colors.transparent The background color of alphabet item.
selectedStyle TextStyle TextStyl(fontSize: 18, fontWeight: FontWeight.bold) The text style of the selected alphabet item text.

Note that: the Country List Picker doesn't support alpabets bar with Chinese, Japanese and Korean languages.

   CountryListPicker(
       onCountryChanged: ((value) {
           // do something
       }),
       onChanged: (value) {
           // do something
       },
       dialogTheme: DialogThemeData(
           alphabetsBarTheme: AlphabetsBarThemeData(
             backgroundColor: Colors.transparent,
             selectedBackgroundColor: Colors.green,  //<- change background of selected item
             // style: ,           // to change unselected alphabet items text style
             // selectedStyle: ,   // to change selected alphabet items text style
           ),
   )

Dialog Tiles Paramters

Parameter Type Default Description
backgroundColor Color Theme.of(context).colorScheme.surface The background color of the tile.
style TextStyle TextStyle(fontSize: 16, fontWeight: FontWeight.bold) The text style of the title text.
currentLocationTileTitle String "Current Location" The title of the tile for current location.
lastPickIcon Icon Icon(Icons.check) The icon for the last pick tile.
lastPickTitle String "Last Pick" The title of the last pick tile.
searchHint String "name/dial code..." The hint text for the search bar.
searchHintStyle TextStyle TextStyle(fontSize: 16, color: Color(0xFF9E9E9E) The text style of the search hint text.
searchTitle String "Search" The title of the search bar.

if you need to show CurrentLocationTile, you must set the localCountry value to country what you want.

Features and bugs

Please file feature requests and bugs at the [issue tracker][tracker].
issue tracker

References.

  1. country_list_pick
  2. getworld]
  3. mask_text_input_formatter

GitHub

https://github.com/AmremadDev/country-list-picker