Custom phone field with country dialing code

[abhinavc]

Hi,
I needed a phone field that would also accept a country code. So, I pieced together a solution using flutter_country_picker and this package. Sharing it here in case (a) someone finds it useful and/or (b) it can be incorporated into this package itself

Upon form submission, you will see the following 3 attributes in form.value

• phone : the actual number (minus country code)
• country_code
• country: ISO code for the country (like IN for India, US for USA etc.)

The fully qualified phone # will be +<country_code><phone>
I am sure the implementation can be improved / generalized by Danvick. I am only sharing what I could cook up for my limited needs

Selecting country

class _Country extends StatefulWidget {
  _Country();

  _CountryState createState() => _CountryState();
}

class _CountryState extends State<_Country> {
  Country _country;

  @override
  Widget build(BuildContext context) {
    return CountryPicker(
      dense: true,
      onChanged: (Country country) {
        setState(() {
          _country = country;
          FormBuilderState form = FormBuilder.of(context);

          form.setAttributeValue("country_code", country.dialingCode);
          form.setAttributeValue("country", country.isoCode);
          print("${country.name} -> ${country.isoCode} -> ${country.dialingCode}");
        });
      },
      selectedCountry: _country,
    );
  }
}

... then using it to build a custom phone field

// phone w/ country code
class FormPhone extends FormBuilderCustomField<void> {
  FormPhone({
              @required String attribute,
              @required String purpose,
              String label,
              IconData icon = Icons.phone_android,
              bool mandatory = false,
            }) : super(
    attribute: attribute,
    formField: FormField(
      enabled: true,
      builder: (FormFieldState<void> field) {
        return InputDecorator(
          decoration: InputDecoration(
            labelText: label?.toUpperCase(),
            icon: Icon(icon),
            helperText: purpose?.toUpperCase(),
            contentPadding: EdgeInsets.only(top: 15),
          ),

          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              _Country(),
              Container(
                width: 200,
                child: FormBuilderTextField(
                  attribute: "phone",
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    enabledBorder: InputBorder.none,
                  ),
                  validators: [FormBuilderValidators.numeric(errorText: "Only digits (1-9) "
                      "allowed")
                  ] + (mandatory ? [
                    FormBuilderValidators.required(),
                    FormBuilderValidators.minLength(5, errorText: "Seems too short!"),
                  ] : []),
                ),
              ),
            ],
          ),
        );
      },
    ),
  );
}

[danvick]

Hi @abhinavc,
This is a cool Widget which people might find useful. I'll consider adding it to the package.

Cheers!

[danvick]

This feature has been implemented in v3.10.0 of the package. Let's get feedback on that.