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.

    sdk: flutter
  country_list_pick: ^1.0.0+3

You can use the following widget to make Country Picker.

        // 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
            // code of country
            // code phone of country
            // path flag of country

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 {
  Widget build(BuildContext context) {
    return  MaterialApp(
         theme: ThemeData(
  , //primary color for theme
         home: MyCountryPicker() //set the class here

class MyCountryPicker extends StatelessWidget{
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Easy Country Picker"),  
      body: Container( 
         child: Card(
             padding: EdgeInsets.all(5),
                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(; //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.

No any Comments on this Article

Please Wait...