Flutter – Phone Number Validator

In Flutter, Validating phone numbers is a crucial step to ensure data accuracy and enhance user experience. Flutter, provides a powerful package for handling phone number input and validation with the intl_phone_number_input package. In this article, we’ll explore how to streamline phone number validation in Flutter using the intl_phone_number_input package. This package offers a beautiful user interface for entering international phone numbers, with built-in validation mechanisms, making it a better choice for developers looking to enhance their applications with robust input functionality. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Adding the Dependencies

Here we have to add the the following dependencies to our pubspec.yaml file.

dependencies:
  intl_phone_number_input: ^0.7.4

Or, Simply you can run the below command in your VS code Terminal.

flutter pub add intl_phone_number_input

Step 3: Import the Package

First of all import material.dart package and the intl_phone_number_input package.

import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green, // Set the app's primary theme color
        ),
        debugShowCheckedModeBanner: false,
        home: MyForm());
  }
}

Step 6: Create MyForm Class

The MyForm class in Flutter serves as a stateful widget, it enables users to input and validate international phone numbers. The essential components include a global key for form identification, a variable to store the selected phone number and ISO code, and a widget tree structure composed of an InternationalPhoneNumberInput for number input, and an ElevatedButton to trigger form validation and submission. Callbacks such as onInputChanged and onInputValidated handle dynamic changes and additional validation logic. Upon valid form submission, the class prints the phone number and ISO code to the console. Comments are added for better understandings.

// InternationalPhoneNumberInput widget for phone number input
InternationalPhoneNumberInput(
                // Callback for when the input changes
                onInputChanged: (PhoneNumber number) {
                  _phoneNumber = number;
                },
                // Callback for when the input is validated
                onInputValidated: (bool value) {
                  // You can perform additional validation here if needed
                },
                // Configuration for the country selector
                selectorConfig: SelectorConfig(
                  selectorType: PhoneInputSelectorType.DIALOG,
                ),
                // Ignore blank input
                ignoreBlank: false,
                // Auto-validation mode
                autoValidateMode: AutovalidateMode.onUserInteraction,
                // Style for the country selector
                selectorTextStyle: TextStyle(color: Colors.black),
                // Initial value for the phone number input
                initialValue: _phoneNumber,
                // Controller for the text field
                textFieldController: TextEditingController(),
                // Decoration for the input field
                inputDecoration: InputDecoration(
                  labelText: 'Phone Number',
                  border: OutlineInputBorder(),
                ),
                // Format input (e.g., adding spaces between digits)
                formatInput: false,
              ),

Dart

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  // Key to uniquely identify the form
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  // Store the selected phone number and ISO code
  PhoneNumber _phoneNumber = PhoneNumber(isoCode: 'IN');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Number Validation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // InternationalPhoneNumberInput widget
              // for phone number input
              InternationalPhoneNumberInput(
                // Callback for when the input changes
                onInputChanged: (PhoneNumber number) {
                  _phoneNumber = number;
                },
                // Callback for when the input is validated
                onInputValidated: (bool value) {
                  // You can perform additional validation here if needed
                },
                // Configuration for the country selector
                selectorConfig: SelectorConfig(
                  selectorType: PhoneInputSelectorType.DIALOG,
                ),
                // Ignore blank input
                ignoreBlank: false,
                // Auto-validation mode
                autoValidateMode: AutovalidateMode.onUserInteraction,
                // Style for the country selector
                selectorTextStyle: TextStyle(color: Colors.black),
                // Initial value for the phone number input
                initialValue: _phoneNumber,
                // Controller for the text field
                textFieldController: TextEditingController(),
                // Decoration for the input field
                inputDecoration: InputDecoration(
                  labelText: 'Phone Number',
                  border: OutlineInputBorder(),
                ),
                // Format input (e.g., adding spaces between digits)
                formatInput: false,
              ),
              SizedBox(height: 20),
              // Submit button
              ElevatedButton(
                onPressed: () {
                  // Validate the form
                  if (_formKey.currentState?.validate() ?? false) {
                    // Form is valid, perform your actions here
                    print('Form is valid');
                    print('Phone number: ${_phoneNumber.phoneNumber}');
                    print('ISO code: ${_phoneNumber.isoCode}');
                  } else {
                    // Form is invalid
                    print('Form is invalid');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green, // Set the app's primary theme color
        ),
        debugShowCheckedModeBanner: false,
        home: MyForm());
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  // Key to uniquely identify the form
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  // Store the selected phone number and ISO code
  PhoneNumber _phoneNumber = PhoneNumber(isoCode: 'IN');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Number Validation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              // InternationalPhoneNumberInput widget for phone number input
              InternationalPhoneNumberInput(
                // Callback for when the input changes
                onInputChanged: (PhoneNumber number) {
                  _phoneNumber = number;
                },
                // Callback for when the input is validated
                onInputValidated: (bool value) {
                  // You can perform additional validation here if needed
                },
                // Configuration for the country selector
                selectorConfig: SelectorConfig(
                  selectorType: PhoneInputSelectorType.DIALOG,
                ),
                // Ignore blank input
                ignoreBlank: false,
                // Auto-validation mode
                autoValidateMode: AutovalidateMode.onUserInteraction,
                // Style for the country selector
                selectorTextStyle: TextStyle(color: Colors.black),
                // Initial value for the phone number input
                initialValue: _phoneNumber,
                // Controller for the text field
                textFieldController: TextEditingController(),
                // Decoration for the input field
                inputDecoration: InputDecoration(
                  labelText: 'Phone Number',
                  border: OutlineInputBorder(),
                ),
                // Format input (e.g., adding spaces between digits)
                formatInput: false,
              ),
              SizedBox(height: 20),
              // Submit button
              ElevatedButton(
                onPressed: () {
                  // Validate the form
                  if (_formKey.currentState?.validate() ?? false) {
                    // Form is valid, perform your actions here
                    print('Form is valid');
                    print('Phone number: ${_phoneNumber.phoneNumber}');
                    print('ISO code: ${_phoneNumber.isoCode}');
                  } else {
                    // Form is invalid
                    print('Form is invalid');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: