Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
Updated 1 February 2024
In this blog, we will learn how to Implement Country Picker In Flutter.
You may also check our flutter app development company page.
Country selection is a common requirement in many mobile applications, whether it is for user registration, address input, or localization settings.
It streamlines the process of collecting the user’s country details by providing a pre-built UI component that can be effortlessly integrated into Flutter applications.
First we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.
Now, run the command “flutter pub get” to add the dependencies.
Add the following package to your class.
import ‘package:country_picker/country_picker.dart’;
Create a button that, when clicked by the user, triggers the showCountryPicker function.
The onSelect callback is essential for responding to user interactions when a country is selected.
onSelect
This function is triggered by the country picker when a user makes a selection, passing the selected country as a parameter to the callback.
Callback provides an additional opportunity to respond to user interactions with the country picker.
This function is invoked when the country picker is dismissed, regardless of whether a country is selected or not.
The showPhoneCode parameter provides a convenient way to display the phone code before the country name within the country picker.
showPhoneCode
Enabling this option can help users quickly identify the phone code associated with each country, which is particularly useful for applications that require phone number input.
To enable the display of phone codes in the country picker, set the showPhoneCode parameter to true:
true
The searchAutofocus parameter allows you to control whether the search field in the country picker dialog should be automatically focused when the dialog is opened.
searchAutofocus
Enabling this option can enhance the user experience by immediately expanding the virtual keyboard, making it easier for users to start typing and searching for their desired country.
To enable search autofocus in the country picker, set the searchAutofocus parameter to true:
The showSearch parameter provides flexibility in displaying or hiding the search bar within the country picker dialog.
showSearch
Enabling this option allows users to search for countries directly within the picker, while disabling it hides the search functionality, simplifying the interface for users who may not require search capabilities.
To control the visibility of the search bar in the country picker, set the showSearch parameter accordingly:
The showWorldWide parameter adds flexibility to the country picker by including an option for “World Wide” at the beginning of the list. This feature provides users with the ability to select a global or unspecified option, which may be useful in certain scenarios where country-specific information is not applicable.
showWorldWide
To include the “World Wide” option in the country picker, set the showWorldWide parameter to true:
The favorite parameter offers a convenient way to prioritize certain countries as favorites, ensuring they appear at the top of the country picker list.
favorite
This feature allows users to quickly access their preferred or frequently used countries, streamlining the selection process and enhancing user convenience.
To showcase favorite countries at the top of the list in the country picker, provide a list of favorite country ISO codes to the favorite parameter:
The countryListTheme parameter empowers you to customize the appearance and behavior of the country picker’s bottom sheet and its associated widgets. This feature allows you to tailor the visual aspects and styling of the country list to match your app’s design language and branding, providing a cohesive user experience.
countryListTheme
To customize the country list theme, create a CountryListThemeData object and specify the desired visual properties:
CountryListThemeData
As you can see in the output, we are picking a country and showing it.
That’s it! You’ve successfully implemented country picker in your Flutter app.
You can also check other blogs from here.
Hope this blog helped you to better understand the implementation of Country Picker In Flutter.
Thanks for reading this blog ❤️
https://pub.dev/packages/country_picker
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.