How to make International Phone Code Dropdown List Easily on Flutter

If you are making signup form with Flutter, you may need an input field to insert phone number along with code drop down selector. In this example, we are going to show you to make easy International Phone Code selection drop down using the package. You do not need any kind of data.

Add the intl_phone_field Flutter package in your pubspec.yaml file as a dependency like below:

dependencies:
  flutter:
    sdk: flutter
  intl_phone_field: ^1.2.0

Widget to make International Phone Code Field:

IntlPhoneField(
    decoration: InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(
            borderSide: BorderSide(),
        ),
    ),
    initialCountryCode: 'NP',
    onChanged: (phone) {
        print(phone.completeNumber);
    },
)

See the following full dart code for Flutter, read the explanation comment between codes.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:intl_phone_field/intl_phone_field.dart';
//import package file

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
         home: Home() //set the class here
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
       appBar: AppBar(
         title: Text("Phone Country Code"), //appbar title
         backgroundColor: Colors.redAccent, //appbar color
       ),
       body: Container( 
           padding: EdgeInsets.all(20),
           child: Column(children: <Widget>[
                Container( 
                  child:IntlPhoneField(
                        decoration: InputDecoration( //decoration for Input Field
                            labelText: 'Phone Number',
                            border: OutlineInputBorder(
                                borderSide: BorderSide(),
                            ),
                        ),
                        initialCountryCode: 'NP', //default contry code, NP for Nepal
                        onChanged: (phone) {
                            //when phone number country code is changed
                            print(phone.completeNumber); //get complete number
                            print(phone.countryCode); // get country code only
                            print(phone.number); // only phone number
                        },
                    ) 
                ),
                Container( 
                  margin: EdgeInsets.only(top:20), //make submit button 100% width
                  child:SizedBox( 
                    width:double.infinity,
                    child:RaisedButton(
                      onPressed: (){
                           //action for button
                      },
                      color: Colors.redAccent,
                      child: Text("Submit"),
                      colorBrightness: Brightness.dark,
                      //backgroud color is darker so its birghtness
                   ),
                  ),
                )
           ],)
       ),
    );
  }
}

Output: