canopas_country_picker

Description:

canopas country picker

A Simple, Customizable Flutter Country picker for picking a Country or Dialing code with Search functionality.
Preview #

How to use #
If you want to show the country picker bottom sheet, use:
CountryCode? code = await showCountryCodePickerSheet(context: context);
copied to clipboard

If you want to show the country picker dialog, use:
CountryCode? code = await showCountryCodePickerDialog(context: context);
copied to clipboard

If you want to show the country list as a UI component, use the CountryCodeSelector widget:
CountryCodeSelector(
onCountryCodeTap: (CountryCode code) {
/// Specify country code tap event
},
//Note: Cannot provide both onCountryCodeTap and codeBuilder, as onCountryCodeTap will not work if you have provided codeBuilder.
)
copied to clipboard

How to get a country code from the country alpha-2:,
CountryCode code = CountryCode.getCountryCodeByAlpha2(
countryAlpha2Code:"IN", // its case-insensitive you can use both IN or in
);
copied to clipboard

You can use await Alpha2CountryCode,getCurrentCountryCode() to obtain the current alpha-2 code:
String countryAlpha2Code = await Alpha2CountryCode.getCurrentCountryCode();

CountryCode code = CountryCode.getCountryCodeByAlpha2(
countryAlpha2Code: countryAlpha2Code,
);
copied to clipboard

Note: Using await Alpha2CountryCode.getCurrentCountryCode() will return the current country alpha-2 code based on the IP location from the 'http://ip-api.com/json/' API.


You can also get the current country alpha-2 code based on the user's device region, using PlatformDispatcher locale.
CountryCode code = CountryCode.getCountryCodeByAlpha2(
countryAlpha2Code: WidgetsBinding.instance.platformDispatcher.locale.countryCode,
/// if you have context, use View.of(context).platformDispatcher.locale.countryCode
);
copied to clipboard

Note: WidgetsBinding and View.of(context) are provided by the Flutter SDK.


How to get a country code from the country dial code,
CountryCode code = CountryCode.getCountryCodeByDialCode(
dialCode: "+91",
);
copied to clipboard

If you want to show the localized country name, use:
String? l10nCountryName = countryCode.localizedName("en");
copied to clipboard

Customizations #
For customizations, we are providing the CustomizationBuilders class to customize each section.
customizationBuilders: CustomizationBuilders(
codeBuilder: (CountryCode code) {
// Return something to change the country list item UI.
// Note: onCountryCodeTap will be overridden by codeBuilder in customizationBuilders.

// If want to do some customization in default country code view, you can use
return DefaultCountryCodeListItemView(
onCountryCodeTap: () {},
code: code,
locale: 'US', // To show a localized country name,
);
},

codeSeparatorBuilder: (BuildContext context, int index) {
// Return something to add a separator between country codes.
return const SizedBox(); // Default
},

countryListBuilder: (List<CountryCode> codes, ScrollController? controller) {
// Return something to customize the country list
},

textFieldBuilder: (void Function(String)? filter) {
// Return the search text field widget
//
// If you want to do some customization in the default text field, you can use
return DefaultCountryCodeFilterTextField(
filter: filter,
);

// Use filter(searchText); to update the country code list.
},
),
copied to clipboard

Bugs and Feedback #
For bugs, feedback, questions and discussions please use the Github Issues.
Credits #
Canopas Country Picker is owned and maintained by the Canopas team.
You can follow us on Twitter at @canopassoftware for project updates and releases.
We regularly upload blogs on new topics, which you can read here.