Flutter中使用intl_phone_number_input实现自动带区号手机号输入问题

问题核心在于你当前直接用输入框控制器的文本（仅用户输入的本地号码）传给Firebase，而没有利用intl_phone_number_input组件返回的包含区号的完整号码对象。按以下步骤修改即可实现选国家后自动带区号的效果：

1. 声明变量存储完整号码对象 #

在你的State类里添加一个PhoneNumber类型的变量，用来保存用户选择国家后生成的完整号码：

PhoneNumber _phoneNumber = PhoneNumber(isoCode: 'CN'); // 可设置默认国家，比如中国

2. 修改输入框的onInputChanged回调 #

更新回调逻辑，把组件返回的完整号码对象保存到刚才声明的变量里，同时输出正确的带区号号码：

InternationalPhoneNumberInput(
  initialValue: _phoneNumber,
  selectorConfig: const SelectorConfig(
    selectorType: PhoneInputSelectorType.BOTTOM_SHEET
  ),
  onInputChanged: (PhoneNumber phoneNumber) {
    setState(() {
      _phoneNumber = phoneNumber; // 保存带区号的完整号码对象
    });
    print(_phoneNumber.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,
  ),
),

3. 修改验证按钮的传参逻辑 #

把Firebase验证时的phoneNumber参数从phoneNumberController.text换成_phoneNumber.phoneNumber，确保传入的是带区号的完整号码：

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: _phoneNumber.phoneNumber!, // 使用带区号的完整号码
        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),
      ),
    ),
  ),
),

关键说明 #

• intl_phone_number_input组件的onInputChanged回调返回的PhoneNumber对象中，phoneNumber字段就是包含所选国家区号的完整手机号，无需用户手动输入区号。
• 不要直接使用textFieldController.text，因为该值仅为用户输入的本地号码（不带区号），无法直接用于Firebase的手机号验证。

内容的提问来源于stack exchange，提问作者VIKAS SHARMA