Posted in Dart Flutter

Flutter – How to make Country Picker and get Name, Code, Dial Code, Flag

Flutter – How to make Country Picker and get Name, Code, Dial Code, Flag Posted on June 1, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

When you are making a form in Flutter which has a filed to get Country name, it is better to make country select then 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, I have used a package which helps to make Country Picker and get the country data easily on country selection.

country list picker widget

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);
        },
),

flutter country picker widget

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 country picker without any data easily using package.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *