flutter_country_picker

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

Screenshots

Getting Started

Add the package to your pubspec.yaml:

flutter_country_picker: last version

In your dart file, import the library:

import 'package:flutter_country_picker/flutter_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}');
  },
);

Use country phone input without country picker using CountryPhoneInput:

CountryPhoneInput();

Use country phone input with country picker using CountryPhoneInput:

CountryPhoneInput(
  controller: _controller,
  mask: _mask,
  country: _country,
  countryCode: _countryCode,
  onTap: () {
    showCountryPicker(
      context: context,
      exclude: ['KN'],
      favorite: ['RU'],
      showPhoneCode: true,
      sheetType: SheetType.cupertino,
      onSelect: (Country country) {
        setState(() {
          _country = '${country.flagEmoji} ${country.nameLocalized}';
          _countryCode = country.phoneCode;
          _mask = country.mask;
        });
      },
    );
  },
);

Use TextEditingController to get current phone value on any event:

CupertinoButton.filled(
  onPressed: () {
    setState(() {
      _phone = "+$_countryCode${_controller.text.replaceAll(" ", "")}";
    });
  },
  child: Text(
    'Submit',
    style: TextStyle(color: CupertinoColors.white),
  ),
);

For localization:

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

MaterialApp(
  supportedLocales: [
    const Locale('en'),
    const Locale('el'),
    // Generic Simplified Chinese 'zh_Hans'
    const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
    // Generic traditional Chinese 'zh_Hant'
    const Locale.fromSubtags(languageCode: 'zh', scriptCode: '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
showSearch Can be used to show/hide the search bar.
showWorldWide An optional argument for showing "World Wide" option at the beginning of the list
sheetType: Can be used to defines the type of [ModalBottomSheet] can be material or cupertino, which in turn determines the type of method used for [showModalBottomSheet]. Used packge modal_bottom_sheet
```
showCountryPicker(
  context: context,
  sheetType: SheetType.cupertino,
);
```

countryListTheme: Can be used to customize the country list's bottom sheet and widgets that lie within it. (optional).

showCountryPicker(
  context: context,
  countryListTheme: CountryPickerThemeData(
    flagSize: 25,
    backgroundColor: Colors.white,
    textStyle: TextStyle(fontSize: 16, color: Colors.blueGrey),
    // Optional. Country list modal height
    bottomSheetHeight: 500,
    // 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,
  // It takes a list of country code(iso2)
  exclude: <String>['KN', 'MF'], .
  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
favorite Can be used to show the favorite countries at the top of the list (optional).

Contributions