mi_country_picker: A Flutter Package for Easy Country Code Selection

Published on by Flutter News Hub

mi_country_picker: A Flutter Package for Easy Country Code Selection

mi_country_picker is a Flutter package that provides a comprehensive solution for selecting country codes. It offers multiple modes for the country code picker, including a dialog, bottom sheet, and dropdown, and supports the locale of the current device in over 70 languages.

Key Features

  • Multiple Picker Modes: Choose between dialog, bottom sheet, and dropdown modes for seamless integration into your app.
  • Localization Support: Display country names and codes in the current device's language, supporting over 70 locales.
  • Customization Options: Customize the appearance and behavior of the picker using various configuration options, such as layout, search style, and country list filtering.

Usage

Country Picker Dialog:

final country = await CountryPicker.showCountryPickerDialog(context: context);

Country Picker Bottom Sheet:

final country = await CountryPicker.showCountryPickerBottomSheet(context: context);

Country Picker Cupertino Bottom Sheet:

final country = await CountryPicker.showCountryPickerCupertinoBottomSheet(context: context);

Country Picker Dropdown:

CountryPickerDropDown(
  onSelectValue: (CountryData value) {
    debugPrint('CountryPickerDropDown ::$');
  },
);

Getting the Initial Country:

CountryPicker.getCountryData(context: context, code: "+1");

Configuration Options

LayoutConfig:

  • textStyle: Style for country list elements.
  • elementsSequence: Sequence of country elements (code, country name, flag).
  • flagWidth/Height: Dimensions of the flag.
  • flagDecoration: Decoration for the flag.
  • showCountryName/Code/Flag: Visibility options for country name, code, and flag.

SearchStyle:

  • searchFieldInputDecoration: Decoration for the search bar.
  • hintText: Hint text for the search bar.
  • searchBoxHeight/Margin: Dimensions and margins for the search bar.

CountryListConfig:

  • countryFilter: List of country codes to display.
  • comparator: Comparator for sorting the country list.
  • excludeCountry: List of country codes to exclude.

Customization Examples

Changing the Country Sequence:

LayoutConfig(
  elementsSequence: Sequence.nameWithFlag,
);

Hiding the Country Code:

LayoutConfig(
  showCountryCode: false,
);

Customizing the Search Bar:

SearchStyle(
  searchFieldInputDecoration: InputDecoration(
    hintText: 'Search for a country',
    border: OutlineInputBorder(),
  ),
);

Conclusion

mi_country_picker is a versatile and user-friendly package that simplifies the task of selecting country codes in Flutter applications. Its comprehensive features and customizable options make it a valuable tool for developers who need to integrate internationalization into their projects.

Flutter News Hub