Flutter IntlPhoneField run function on valid phone number (intl_phone_field) - flutter

Question

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?

Answer 1

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.

Answer 2

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.