In this blog, we will learn how to Implement Country Picker In Flutter.
You may also check our flutter app development company page.
Introduction:-
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.
Implementation:-
First we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter country_picker: ^2.0.24 |
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’;
Implement the showCountryPicker Function:-
Create a button that, when clicked by the user, triggers the showCountryPicker function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
ElevatedButton( onPressed: () { showCountryPicker( context: context, favorite: <String>['IN'], exclude: <String>['AF','BR'], showPhoneCode: true, onSelect: (Country country) { debugPrint('Select country: ${country.displayName}'); setState(() { countryName=country.displayName; }); }, countryListTheme: CountryListThemeData( borderRadius: const BorderRadius.only( topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), ), inputDecoration: InputDecoration( labelText: 'Search', hintText: 'Start typing to search', prefixIcon: const Icon(Icons.search), border: OutlineInputBorder( borderSide: BorderSide( color: const Color(0xFF8C98A8).withOpacity(0.2), ), ), ), searchTextStyle: const TextStyle( color: Colors.black, fontSize: 18, ), ), ); }, child: const Text('Show country picker'), ) |
Handling Selected Country:-
The onSelect callback is essential for responding to user interactions when a country is selected.
This function is triggered by the country picker when a user makes a selection, passing the selected country as a parameter to the callback.
|
1 2 3 4 5 6 |
onSelect: (Country country) { debugPrint('Select country: ${country.displayName}'); setState(() { countryName = country.displayName; }); }, |
Handling Country Picker Closure The onClosed:-
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.
|
1 2 3 4 5 |
onClosed: () { print('Country picker closed'); // Perform any actions upon country picker closure }, |
Display Phone Code:-
The showPhoneCode parameter provides a convenient way to display the phone code before the country name within the country picker.
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:
|
1 2 3 4 5 6 7 8 9 |
showCountryPicker( context: context, showPhoneCode: true, onSelect: (Country country) { print('Selected country: ${country.name}'); // Perform any actions with the selected country }, ); |
Enable Search Autofocus:-
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.
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:
|
1 2 3 4 5 6 7 8 9 |
showCountryPicker( context: context, searchAutofocus: true, onSelect: (Country country) { print('Selected country: ${country.name}'); // Perform any actions with the selected country }, ); |
Controller Search Bar Visibility:-
The showSearch parameter provides flexibility in displaying or hiding the search bar within the country picker dialog.
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:
|
1 2 3 4 5 6 7 8 9 10 |
showCountryPicker( context: context, showSearch: true, // Set to true to show the search bar onSelect: (Country country) { print('Selected country: ${country.name}'); // Perform any actions with the selected country }, ); |
Include World Wide Option:-
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.
To include the “World Wide” option in the country picker, set the showWorldWide parameter to true:
|
1 2 3 4 5 6 7 8 9 |
showCountryPicker( context: context, showWorldWide: true, // Set to true to show "World Wide" option onSelect: (Country country) { }, ); |
Prioritize Favorite Countries:-
The favorite parameter offers a convenient way to prioritize certain countries as favorites, ensuring they appear at the top of the country picker list.
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:
|
1 2 3 4 5 6 7 8 |
showCountryPicker( context: context, favorite: <String>['IN'], onSelect: (Country country) { print('Selected country: ${country.name}'); // Perform any actions with the selected country }, ); |
Customize Country List Theme
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.
To customize the country list theme, create a CountryListThemeData object and specify the desired visual properties:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
showCountryPicker( context: context, countryListTheme: CountryListThemeData( borderRadius: const BorderRadius.only( topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), ), inputDecoration: InputDecoration( labelText: 'Search', hintText: 'Start typing to search', prefixIcon: const Icon(Icons.search), border: OutlineInputBorder( borderSide: BorderSide( color: const Color(0xFF8C98A8).withOpacity(0.2), ), ), ), searchTextStyle: const TextStyle( color: Colors.black, fontSize: 18, ), ), ); |
Completed Code:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import 'package:country_picker/country_picker.dart'; import 'package:flutter/material.dart'; class CountryPicker extends StatefulWidget { const CountryPicker({Key? key}) : super(key: key); @override State<CountryPicker> createState() => _CountryPickerState(); } class _CountryPickerState extends State<CountryPicker> { String? countryName; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, title: const Text( 'Country picker', style: TextStyle(color: Colors.white), )), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ countryName != null ? Text('Select country: $countryName') : Container(), const SizedBox( height: 8, ), ElevatedButton( onPressed: () { showCountryPicker( context: context, favorite: <String>['IN'], exclude: <String>['AF', 'BR'], showPhoneCode: true, onSelect: (Country country) { debugPrint('Select country: ${country.displayName}'); setState(() { countryName = country.displayName; }); }, countryListTheme: CountryListThemeData( borderRadius: const BorderRadius.only( topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), ), inputDecoration: InputDecoration( labelText: 'Search', hintText: 'Start typing to search', prefixIcon: const Icon(Icons.search), border: OutlineInputBorder( borderSide: BorderSide( color: const Color(0xFF8C98A8).withOpacity(0.2), ), ), ), searchTextStyle: const TextStyle( color: Colors.black, fontSize: 18, ), ), ); }, child: const Text('Show country picker'), ), ], ), ), ); } } |
Output:-
As you can see in the output, we are picking a country and showing it.
Country Picker
Country selection is a common requirement in many mobile applications, whether it is for user registration, address input, or localization settings.
Conclusion:-
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 ❤️