CODEWITHSUNDEEP
flutter
genericUser
genericUser

Reputation: 7118

Flutter IntlPhoneField run function on valid phone number (intl_phone_field)

I'm using the intl_phone_field package to verify phone numbers based on country code.

The IntlPhoneField checks automatically for invalid phone numbers, and prompt a message respectively.

It support onChange, onSubmit and onSaved functions, but does not support an onValid function.

I want to enable/disable a Submit Button, based on package's validate function, Since it already supports many country codes and different phone number lengths.

Widget build(BuildContext context) {
    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      initialCountryCode: 'US',
      // countries: const ['US'],
    );
  }

How do I achieve that?

Upvotes: 1

Views: 7272

Answers (4)

Mohamed Ebrahim
Mohamed Ebrahim

Reputation: 1

in the official document of the package you will find that you can validate it using :

GlobalKey _formKey = GlobalKey();

  Form(
            key: _formKey,
            child: IntlPhoneField( .... rest of your widget

and check in your button using the _formKey.currentState!.validate()

Upvotes: 0

Harshit
Harshit

Reputation: 11

You can create a Boolean variable and then use validator inside IntlPhoneField:

bool isPhoneValidated = false;

Widget build(BuildContext context) {
    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      validator: (value) {
        if (value!.isValidNumber()) {
           setState(() {
              isPhoneValidated = true;
           });
        } else {
           setState(() {
              isPhoneValidated = false;
           });
        }
        return null;
      },
      initialCountryCode: 'US',
      // countries: const ['US'],
    );
  }

Now, before navigating, just check if the Boolean variable is true or not.

Upvotes: 1

genericUser
genericUser

Reputation: 7118

Solved!

I detected validation using the intl_phone_field package by exporting the Country object, which contains the minLength and maxLength of the country code phone number.

Using those parameters I verified the phone number in the onChange function and a function in case of verified phone number.

class PhonePicker extends StatelessWidget {
  const PhonePicker({super.key});

  @override
  Widget build(BuildContext context) {
    const _initialCountryCode = 'US';
    var _country =
        countries.firstWhere((element) => element.code == _initialCountryCode);

    return IntlPhoneField(
      autofocus: true,
      decoration: const InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(),
        counterText: '',
      ),
      initialCountryCode: _initialCountryCode,
      onChanged: (value) {
        if (value.number.length >= _country.minLength &&
            value.number.length <= _country.maxLength) {
          // Run anything here
        }
      },
      onCountryChanged: (country) => _country = country,
    );
  }
}

I have opened a pull request with a solution in the GitHub project.

Upvotes: 3

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

You can a state variable and use validator data to check whether number is valid or not

 bool isValid = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IntlPhoneField(
          autofocus: true,
          validator: (p0) {
            /// logic to validate number
            /// isValid =true
          },
          decoration: const InputDecoration(
            labelText: 'Phone Number',
            border: OutlineInputBorder(),
            counterText: '',
          ),
          initialCountryCode: 'US',
          // countries: const ['US'],
        ),
        ElevatedButton(onPressed: isValid ? () {} : null, child: child)
      ],
    );

Also you can use TextEditingController with listener and check data and enable button state. make sure to use setState.

Upvotes: 1

Related Questions