How to make the country code come inside the form field in flutter using intl_phone_number_input

4.9k views Asked by At

enter image description here

I want to make the country code pick come inside the textformfield() like a prefix icon. How do I do that?. This is the code I used from intl_phone_number_input.

InternationalPhoneNumberInput(
          onInputChanged: (PhoneNumber number) {
            print(number.phoneNumber);
          },
          onInputValidated: (bool value) {
            print(value);
          },
          selectorConfig: SelectorConfig(
            selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
          ),
          ignoreBlank: false,
          autoValidateMode: AutovalidateMode.disabled,
          selectorTextStyle: TextStyle(color: Colors.black),
          initialValue: number,
          textFieldController: controller,
          formatInput: false,
          keyboardType:
              TextInputType.numberWithOptions(signed: true, decimal: true),
          inputBorder: OutlineInputBorder(),
          onSaved: (PhoneNumber number) {
            print('On Saved: $number');
          },
        ),
1

There are 1 answers

1
Pablito On

You would need to set setSelectorButtonAsPrefixIcon inside InternationalPhoneNumberInput to true.

selectorConfig: const SelectorConfig(
                        selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                        setSelectorButtonAsPrefixIcon: true,
                        leadingPadding: 20,
                        useEmoji: true,
                      ),