How to make Country Picker and get Name, Code, Dial Code, Flag on Flutter App
When you are making a form in Flutter which has a filed to get a Country name, it is better to make country select than input field. But to make a country select list is a bit lengthy, you need data of countries, flags, country codes, dial codes. Don’t worry, In this example, were have used a package that helps to make Country Picker and get the country data easily on country selection.
Add the country_list_pick flutter package in your dependency by adding the following line in your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
country_list_pick: ^1.0.0+3
You can use the following widget to make Country Picker.
CountryListPick(
// to show or hide flag
isShowFlag: true,
// true to show title country
isShowTitle: true,
// true to show code phone country
isShowCode: true,
// to show or hide down icon
isDownIcon: true,
// to initial code number countrey
initialSelection: '+62',
// to get feedback data from picker
onChanged: (CountryCode code) {
// name of country
print(code.name);
// code of country
print(code.code);
// code phone of country
print(code.dialCode);
// path flag of country
print(code.flagUri);
},
),
Full dart code to make Country picker and get the name, code, dial code, and flag URL.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:country_list_pick/country_list_pick.dart';
//import package file
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch:Colors.red, //primary color for theme
),
home: MyCountryPicker() //set the class here
);
}
}
class MyCountryPicker extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Easy Country Picker"),
),
body: Container(
padding:EdgeInsets.all(20),
height:200,
alignment: Alignment.center,
child: Card(
child:Padding(
padding: EdgeInsets.all(5),
child:SizedBox(
width:double.infinity,
child:CountryListPick(
isShowFlag: true, //show flag on dropdown
isShowTitle: true, //show title on dropdown
isShowCode: true, //show code on dropdown
isDownIcon: true, //show down icon on dropdown
initialSelection: '+672', //inital selection, +672 for Antarctica
onChanged: (CountryCode code) {
print(code.name); //get the country name eg: Antarctica
print(code.code); //get the country code like AQ for Antarctica
print(code.dialCode); //get the country dial code +672 for Antarctica
print(code.flagUri); //get the URL of flag. flags/aq.png for Antarctica
},
),
),
)
)
)
);
}
}
In this way, you can make a country picker without any data easily using the package.
Please Wait...
No any Comments on this Article