Skip to content

A Flutter package for showing a modal that contains country dial code. The user can also search for the available codes and select right from the modal.

License

Notifications You must be signed in to change notification settings

Sumit258000/fl_country_code_picker

 
 

Repository files navigation

fl_country_code_picker

style: very good analysisLicense: MIT

A Flutter package for showing a modal that contains country dial code. The user can search for the available codes and select right from the modal. Also, it has an automatic scrolling feature that points at current device's locale. Supports localizations!

📌 Examples

🔨 Installation

dependencies:
    fl_country_code_picker: ^0.1.4

🕹️ Usage

Instantiate FlCountryCodePicker class to access the package's functionalities and properties. You can also pass some optional parameters to customize the picker's view.

/// Default.
final countryPicker = const  FlCountryCodePicker();

/// With custom params.
final countryPickerWithParams = const FlCountryCodePicker(
      localize: true,
      showDialCode: true,
      showSearchBar: true,
      showFavoritesIcon: true,
      favoritesIcon: _yourIcon,
      favorites: _yourFavorites,
      title: _yourModalTitleWidget,
      filteredCountries: _yourFilters,
      countryTextStyle: _yourCountryTextStyle,
      dialCodeTextStyle: _yourdialCodeTextStyle,
      searchBarDecoration: _yourInputDecoration,
    );

Call the modal for country code picker.

    GestureDetector(
    onTap: () async {
        // Show the country code picker when tapped.
        final code = await countryPicker.showPicker(context: context);
        // Null check
        if (code != null) print(code);
    },
    child: Container(
        padding: const  EdgeInsets.symmetric(
        horizontal: 8.0, vertical: 4.0),
        margin: const  EdgeInsets.symmetric(horizontal: 8.0),
        decoration: const  BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(5.0))),
        child: Text('Show Picker', style: const  TextStyle(color: Colors.white)),
        ),
    ),

To enable localization, add the following lines in your MaterialApp.

MaterialApp(
	title: 'Your App',
	// Supported locales at the moment.
	// Cannot find your locale? Please make a request.
	supportedLocales: flc.supportedLocales.map((e) => Locale(e)),
	localizationsDelegates: const [
		// Package's localization delegate.
		CountryLocalizations.delegate,
		GlobalWidgetsLocalizations.delegate,
		GlobalMaterialLocalizations.delegate,
		GlobalCupertinoLocalizations.delegate,
	],
	// ... some omitted values
);

FlCountryCodePicker

FlCountryCodePicker class contains all of the functionalities of this package. This contains (optional) properties that can be supply to achieve customization at picker's view or appearance.

Fields Type Description
favorites List<String>? Favorite countries that can be shown at the top of the list. Should supply the 2 character ISO code of the country e.g. ['US', 'PH', 'AU']
favoritesIcon Icon Custom icon of favorite countries. Defaults to ❤️.
filteredCountries List<String>? Filters all of the [CountryCode]s available and only show the codes that are existing in this list. Should supply the 2 character ISO code of the country e.g. ['US', 'PH', 'AU']
localize bool An optional argument for localizing the country names based on device's current selected Language (country/region). Defaults to true.
searchBarDecoration InputDecoration? An optional argument for appearance customization of modal's search bar.
showDialCode bool An optional argument for showing dial code at country tiles. Defaults to true.
showFavoritesIcon bool An optional argument for showing favorites icon. Defaults to true.
showSearchBar bool An optional argument for showing search bar. Defaults to true.
showDialCode bool An optional argument for showing dial code at country tiles. Defaults to true.
title Widget? An optional argument for modal's title customization.
countryTextStyle TextStyle? An optional argument for country name text customization.
dialCodeTextStyle TextStyle? An optional argument for phone code text customization.

showPicker

showPicker method under the FlCountryCodePicker class that can be used to show the country code picker.

Fields Type Description
context BuildContext A handle to the location of a widget in the widget tree. Required.
isFullScreen bool Shows the modal in full screen mode. Defaults to false.
pickerMinHeight double Picker modal constraints for minimum height. Defaults to 150.
pickerMaxHeight double Picker modal constraints for maximum height. Defaults to 500.
scrollToDeviceLocale bool Property to automatically scroll at device's locale within the picker. Defaults to false.
initialSelectedLocale String? The 2 character ISO code of the country where the scrollController will automatically scroll to.

CountryCode

CountryCode model can be used to manipulate the selected country code by the user.

Fields Type Description
name String The name of the country
code String The 2 character ISO code of the country
dialCode String The country dial code. By convention, international telephone numbers are represented by prefixing the country code with a plus sign (+). e.g. +1 for US
flagImage Widget Widget that can be used on retrieving the selected country flag's image.
flagUri String Uri of this CountryCode located at package's directory to supply at Image widget if you're going to get the raw flag image.
flagImagePackage String Package to supply at Image widget if you're going to get the raw flag image.
localize String Convenient getter for localized version of this country code.

❓ FAQ:

  • How to use country code's flag directory in Image widget?
Image.asset(
       fit: fit,
       width: width,
       countryCode.flagUri,
       alignment: alignment,
       package: countryCode.flagImagePackage,
);
  • How to change modal's title?

First, Create your title Widget.

	const Widget title = Padding(
		padding: EdgeInsets.all(16),
		child: Text(
		'My Title',
		style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
		),
	);

Then pass it to FlCountryCodePicker's title parameter.

countryPicker = const  FlCountryCodePicker(title: title);

🐞 Bugs/Requests

If you encounter any problems feel open an issue. If you feel the library is missing a feature, please raise a ticket on Github and we'll look into it. Pull request are also welcome.

📃 License

MIT License

About

A Flutter package for showing a modal that contains country dial code. The user can also search for the available codes and select right from the modal.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 99.1%
  • Other 0.9%