How to show country code in the container

Question

I'm working on phone number textfield, so for i got this package, and i want its CustomDecoration style, but i'm not getting it. here is my code.

Widget phonetextformfieldCustomwithouticon(context, width, controller, height) {
  return Container(
    width: width,
   
    child: InternationalPhoneNumberInput(
      inputDecoration: InputDecoration(
         contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
         
      },
      
    ),
  );
}

updated:

I want country should have some padding, becuase it starts from the leftmost, and when i add validation in it, redner flow

Container(
                width: MediaQuery.of(context).size.width * 0.9,
                height: 55.0,
                 decoration: BoxDecoration(
                border: Border.all(color: HexColor("#6e6b7b")),
                color: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
                child: InternationalPhoneNumberInput(
                  inputDecoration: InputDecoration(
                  contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
                  labelText: "Phone number",
                  labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
                  hintStyle: GoogleFonts.montserrat(),
                  hintText: "Enter a phone number",
                  border: InputBorder.none,
                  focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            width: 0.0,
                  ))),
              
              // enabledBorder: InputBorder.none,
                  onInputChanged: (PhoneNumber number) {
                    print(number.phoneNumber);
                  },
                  onInputValidated: (bool value) {
                    print(value);
                  },
                  selectorConfig: SelectorConfig(
                    selectorType: PhoneInputSelectorType.DIALOG,
                  ),
                  ignoreBlank: false,
                  autoValidateMode: AutovalidateMode.disabled,
                  selectorTextStyle: TextStyle(color: Colors.black),
                  // initialValue: number,
                  textFieldController: contactNo,
                  formatInput: false,
                  keyboardType: TextInputType.numberWithOptions(
                      signed: true, decimal: true),
                  inputBorder: InputBorder.none,
                  onSaved: (PhoneNumber number) {
                    print('On Saved: $number');
                  },
                ),
              ),

here is the output:

Solution 1

Try below code hope its helpful to you.refer package here and example here

create variables:

final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  final TextEditingController controller = TextEditingController();
  String initialCountry = 'NG';
  PhoneNumber number = PhoneNumber(isoCode: 'NG'); 

Create one function for getting number and dispose your controller

void getPhoneNumber(String phoneNumber) async {
    PhoneNumber number =
        await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number;
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

Your widget:

 Container(
            padding: EdgeInsets.all(7),
            color: Colors.blue,
            child: Card(
              child: Form(
                key: formKey,
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      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: InputBorder.none,
                        onSaved: (PhoneNumber number) {
                          print('On Saved: $number');
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),

Your result screen on your need->

Solution 2

I've just written this:

InternationalPhoneNumberInput(
            onInputChanged: (val) {},
            inputDecoration: InputDecoration(
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  width: 0.0,
                ),
              ),
              enabledBorder: InputBorder.none,
            ),
          ),

and it seems like these:

But I couldn't test it on android. Can you try this?

Comments

[TimeToCode]

hey, please check my updated code and output, I'm facing some issues!

[TimeToCode]

hey, please check my updated code and output, I'm facing some issues!

[Ravindra S. Patil]

@TimeToCode increase your Container width like 70

[Eray]

Hey @TimeToCode! You can wrap your InternationalPhoneNumberInput() with Padding widget and you can set your padding as EdgeInsets.only(left: double). ALSO, you can add "padding: EdgeInsets.only(left: double)," to your Container. no necessary to wrap anything with Padding widget.

[TimeToCode]

that works for country code to be, but when validation error prints render flow error occurs

[TimeToCode]

it has no issue with container width, height has some issue, when i increase the height to 80 render flow error is solved but i want it 55.

[Eray]

Hi @TimeToCode. I tested your code and if you add this line of code selectorButtonOnErrorPadding: 5, in InternationalPhoneNumberInput(), it might work. Otherwise, you can change 5 to other numbers.