CODEWITHSUNDEEP
flutterdartvalidation
I. Antonov
I. Antonov

Reputation: 707

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

Upvotes: 0

Views: 7487

Answers (2)

MarvinKweyu
MarvinKweyu

Reputation: 190

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

Upvotes: 1

Filip
Filip

Reputation: 39

What about autoValidateMode: AutovalidateMode.always?

Upvotes: 1

Related Questions