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?

CodePudding user response：

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.

CodePudding user response：

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.