Previous Article Flutter – How to make International Phone Code Dropdown List easily
Posted in Dart Flutter

Flutter – How to make International Phone Code Dropdown List easily

Flutter – How to make International Phone Code Dropdown List easily Posted on July 27, 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.

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

phone code list inputinternational phone code list

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

In this way, you can make International Phone number input filed easily using Flutter 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 *