flutterdartvalidation

Flutter Phone Number Validation with intl_phone_number_input


I am using the intl_phone_number_input. I have the input field and everything else except for the validation. I tried going through the documentation but I could not understand most of it. After googling a bit I found a website where they had more detailed uses of the parameters but it is from an older version. I'm wondering on how I could use a validation to check the validation. The following is the code for the form/field I written using their documentation.

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

class PhoneNumberInput extends StatelessWidget {
  const PhoneNumberInput({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(left: 30, top: 10, right: 30),
      padding: const EdgeInsets.only(left: 20, top: 5, bottom: 5),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Colors.black12,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Stack(
        children: [
          InternationalPhoneNumberInput(
            onInputValidated: (bool value) => print(value),
            autoValidateMode: AutovalidateMode.disabled,
            ignoreBlank: false,
            onInputChanged: (value) {},
            cursorColor: Colors.black,
            formatInput: false,
            selectorConfig: const SelectorConfig(
              selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
            ),
            inputDecoration: const InputDecoration(
              border: InputBorder.none,
              hintText: 'Phone number',
              hintStyle: TextStyle(
                color: Colors.black26,
              ),
              contentPadding: EdgeInsets.only(left: -25, bottom: 15),
            ),
          ),
        ],
      ),
    );
  }
}


Solution

  • You could do the following:

      InternationalPhoneNumberInput(
                selectorConfig: const SelectorConfig(
                  selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                  setSelectorButtonAsPrefixIcon: true,
                  leadingPadding: 20,
                  useEmoji: true,
                ),
                hintText: 'Phone number',
                validator: (userInput) {
                  if (userInput!.isEmpty) {
                    return 'Please enter your phone number';
                  }
    
                  // Ensure it is only digits and optional '+' or '00' for the country code.
                  if (!RegExp(r'^(\+|00)?[0-9]+$').hasMatch(userInput)) {
                    return 'Please enter a valid phone number';
                  }
    
                  return null; // Return null when the input is valid
                },
                onInputChanged: (PhoneNumber number) {
                  userPhone = number.phoneNumber;
                },
                onInputValidated: (bool value) {
                  print(vallue);
                },
                ignoreBlank: false,
                autoValidateMode: AutovalidateMode.onUserInteraction,
                selectorTextStyle: const TextStyle(color: Colors.black),
                initialValue: number,
                textFieldController: controller,
                formatInput: true,
                keyboardType: const TextInputType.numberWithOptions(
                    signed: true, decimal: true),
                onSaved: (PhoneNumber number) {
                  userPhone = number.phoneNumber;
                },
              ),
    

    Notice how I call validation:

    validator: (userInput) {
                  if (userInput!.isEmpty) {
                    return 'Please enter your phone number';
                  }
    
                  // Ensure it is only digits and optional '+' or '00' for the country code.
                  if (!RegExp(r'^(\+|00)?[0-9]+$').hasMatch(userInput)) {
                    return 'Please enter a valid phone number';
                  }
    
                  return null; // Return null when the input is valid
                },
    

    You can take it a step further and have the initial number set to accept a country code or whatever you have on your code requirements.

    Do go via the updated example in the docs here