A highly customizable modal widget for Flutter that allows users to pick a country from a list. This package is designed for ease of use and extensive customization, supporting both Material and Cupertino modal styles, custom list items, search functionality, and more.
- Customization: Override the default list of countries, prioritize countries, and use custom widgets for search fields, country list items, and selection icons.
- Material and Cupertino Support: Choose between Material or Cupertino modal styles to match your app's design.
- Search Functionality: Includes a search bar to quickly find countries by name.
- Custom List Items: Customize the appearance of country list items with a builder function.
- Selection Feedback: Display a custom icon next to the selected country.
- Depend on it Add this to your package's pubspec.yaml file:
pick_country_picker: ^3.0.0
- Install it You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter pub get
- Import it Now in your Dart code, you can use:
import 'package:pick_country_picker/pick_country_picker.dart';
To show the country picker modal, create a CountryPickerModal widget:
import 'package:flutter/material.dart';
import 'package:pick_country_picker/pick_country_picker.dart';
void _showCountryPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return CountryPickerModal(
onCountryChanged: (Country country) {
// Handle country selection
print("Selected country: ${country.countryName}");
},
);
},
);
}
Customize the country picker modal by setting its properties:
CountryPickerModal(
onCountryChanged: (Country country) {},
selectedCountryCode: 'US',
title: 'Select Your Country',
priorityCountryCodes: ['US', 'CA'],
countryListItemBuilder: (Country country) {
return ListTile(
title: Text(country.countryName),
leading: Image.asset(country.flagUri),
);
},
selectedIcon: Icon(Icons.check_circle, color: Colors.green),
overrideCountryCodes: ['US', 'CA', 'GB'],
excludedCountryCodes: ['AX', 'USA', 'MX'],
hideSearch: false,
hideCloseIcon: false,
backButton: Icon(Icons.arrow_back),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
borderBuilder: (Country country) {
return Border.all(
color: Colors.grey[400]!,
width: 0.5,
);
},
useCupertinoModal: false,
)
To programmatically retrieve country information, you can utilize the following helper function:
To retrieve a country programmatically based on its ISO code, you can use the getCountryByIsoCode
function. This function searches through a list of country objects and returns the one that matches the given ISO code. If no match is found, it returns null
.
Country? getCountryByIsoCode(String isoCode);
For retrieving a country using its country code, the getCountryByCountryCode function is provided. Similar to getCountryByIsoCode, this function scans a list of country objects, finding and returning the one that matches the given country code. In cases where no country is found with the specified code, null is returned.
Country? getCountryByCountryCode(String countryCode)
To find a country based on its name, you can use the getCountryByName function. This function searches through a list of country objects, returning the one whose countryName matches the provided name. If the search yields no results, the function returns null.
Country? getCountryByName(String countryName)
final _pickCountryLookupService = PickCountryLookupService();
Country? c= _pickCountryLookupService.getCountryByIsoCode("uk");
Picker-usage.mp4
An example application demonstrating the usage of CountryPickerModal is included in the example directory of the package.
For more information and additional customization options, please refer to the package documentation.