dev-naiksan/country-calling-code-picker

Country Calling Code Picker

pub package

A searchable country picker for Flutter, ready to use in a dialog, a bottom sheet or full screen. Gives you the country name, its ISO code, its international calling code and a bundled flag image for 250 countries and territories.

Pure Dart — no platform channels, no native build setup. It runs on Android, iOS, web, macOS, Windows and Linux.

https://user-images.githubusercontent.com/65971744/83264373-9782d680-a1dd-11ea-88f2-cebe687da65a.png

Install

dependencies:
  country_calling_code_picker: ^3.0.0

import 'package:country_calling_code_picker/picker.dart';

Usage

Pre-select the country the device is set to

class _MyPageState extends State<MyPage> {
  Country? _selectedCountry;
  bool _didInit = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (!_didInit) {
      _didInit = true;
      _initCountry();
    }
  }

  Future<void> _initCountry() async {
    final country = await getDefaultCountry(context);
    if (!mounted) return;
    setState(() => _selectedCountry = country);
  }
}

getDefaultCountry resolves the device region from the platform locale. Pass fallbackCountryCode to choose what happens when the platform reports a region that is not in the list:

final country = await getDefaultCountry(context, fallbackCountryCode: 'US');

Bottom sheet

final country = await showCountryPickerSheet(context);
if (country != null) {
  setState(() => _selectedCountry = country);
}

https://user-images.githubusercontent.com/65971744/83264384-9c478a80-a1dd-11ea-8385-bca897f1d3d5.png

Dialog

final country = await showCountryPickerDialog(context);

https://user-images.githubusercontent.com/65971744/83264376-994c9a00-a1dd-11ea-86a1-4fec8554f6f9.png

Full screen

class PickerPage extends StatelessWidget {
  const PickerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Select country')),
      body: CountryPickerWidget(
        onSelected: (country) => Navigator.pop(context, country),
      ),
    );
  }
}

https://user-images.githubusercontent.com/65971744/83264392-9e114e00-a1dd-11ea-99a0-1387fd9d2c0f.png

Just the data

// Every country, for your own custom picker.
final List<Country> countries = await getCountries(context);

// Or without a BuildContext, e.g. from a repository or a unit test.
final List<Country> countries = await getCountriesFromBundle();

// A single country by ISO code (case insensitive, null when unknown).
final Country? india = await getCountryByCountryCode(context, 'IN');

// The device region, e.g. 'IN'. Null when the platform reports none.
final String? code = getDeviceCountryCode(context);

Showing a flag

Flag images ship inside this package, so they need the package name:

Image.asset(country.flag, package: countryCodePackageName, width: 32);

Or skip the images entirely and use the emoji flag:

Text(country.flagEmoji); // 🇮🇳

CountryPickerWidget options

Parameter	Default	Description
onSelected	null	Called with the tapped Country.
itemTextStyle	TextStyle(fontSize: 16)	Text style of a list item.
searchInputStyle	TextStyle(fontSize: 16)	Text style of the search box.
searchInputDecoration	null	Replaces the search box decoration entirely.
searchHintText	'Search country name, code'	Hint of the search box.
flagIconSize	32	Width of the flag image.
showSeparator	false	Draw a Divider between items.
focusSearchBox	false	Open the keyboard as soon as the picker shows.
showDeviceCountryFirst	true	Move the device's country to the top of the list.

Search matches the country name (accent insensitive, so aland finds Åland), the ISO code, and the calling code with or without its leading +.

Upgrading from 2.x

Version 3.0.0 requires Dart 3 / Flutter 3.24 or newer.

• The flutter_sim_country_code dependency is gone. getDefaultCountry now reads the device region from the platform locale instead of the SIM card, which is why the package no longer needs any native code and works on web and desktop. On a device whose region setting and SIM disagree, the resolved country can differ from 2.x.
• getCountryByCountryCode now really returns null for an unknown code. It used to throw a StateError. Its match is also case insensitive now.
• The country matching the device is still moved to the top of the picker, but countries that merely share its calling code are no longer removed from the list — picking the US no longer made Canada disappear.
• getDefaultCountry takes an optional fallbackCountryCode.
• CountryPickerWidget.focusSearchBox is now actually forwarded by showCountryPickerSheet and showCountryPickerDialog.

License

MIT — see LICENSE.