Sending OTP in Flutter But The Problem Is I have To enter Number With Country Code Otherwise It Will Not Work

Question

I am designing login page with user phone number authentication using firebase.I have successfully implemented all things and sent ORP successfully. But I have a issue that when I enter phone number in textfield than I have to enter county code with number.

I am using this package: "https://pub.dev/packages/intl_phone_number_input".

Here is the image reference I want: "https://drive.google.com/file/d/13qPBfvdnPnbMCPVcTSsd4SEn-crvZPLj/view?usp=sharing"

According to this image I j just want that Phone Number Automatic take Country Code According To Drop down. and User Don't Have To Add Country Code By Itself.

Here is the code for Phone Number Input Field With Country Code :

InternationalPhoneNumberInput(
  initialValue: number,
  selectorConfig: const SelectorConfig(
  selectorType:
  PhoneInputSelectorType.BOTTOM_SHEET),
  onInputChanged: (PhoneNumber phoneNumber) {
  print(number.phoneNumber);
  },
  onInputValidated: (bool value) {
  print(value);
  },
  ignoreBlank: false,
  textFieldController: phoneNumberController,
  formatInput: true,
  cursorColor: Colors.black,
  inputDecoration: const InputDecoration(
  contentPadding:
  EdgeInsets.only(bottom: 15, left: 0),
  border: InputBorder.none,
  ),
),

Here is the code of Input Field Button Vaildation :

SizedBox(
  width: 356,
  height: 42,
  child: ElevatedButton(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(
          const Color(0XFFDF2C25)),
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
      ),
    ),
    onPressed: () {
           setState(() {
    loading = true;
  });
   auth.verifyPhoneNumber(
    phoneNumber: phoneNumberController.text,
    verificationCompleted: (_){
      setState(() {
        loading= false;
       });
      },
      verificationFailed: (e){
      Utils().toastMessage(e.toString());
      setState(() {
        loading= false;
      });
      }, 
      codeSent: (String verificationId, int? token){
      setState(() {
        loading= false;
      });
      Navigator.push(context, MaterialPageRoute(builder: (context)=> OtpVerification(verificationId: verificationId,)));
     }, 
     codeAutoRetrievalTimeout: (e){
      setState(() {
        loading= false;
      });
      Utils().toastMessage(e.toString());
     });
      },
    child: const Padding( 
      padding: EdgeInsets.all(10.0),
      child: Text(
        'Continue',
        style: TextStyle(fontSize: 16, color: Colors.white),
      ),
    ),
  ),
),

Answer 1

When you are sending the request to the api make sure you only use phone-number (without the country code) and get the country code from the selection menu and then, send both the data controllers to the required api and you'll get the required response.

enter image description here