在Flutter发送OTP,但问题是我必须输入国家代码,否则它将无法工作

yws3nbqq  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(104)

我正在设计登录页面与用户电话号码认证使用firebase。我已经成功地实现了所有的事情,并成功发送ORP。但我有一个问题,当我输入电话号码在文本字段比我必须输入县代码与号码。
我正在使用这个包:“https://pub.dev/packages/intl_phone_number_input“。
以下是我想要的图片参考:“网址:https://drive.google.com/file/d/13qPBfvdnPnbMCPVcTSsd4SEn-crvZPLj/view?usp=sharing“
根据这张图片我只是想电话号码自动采取国家代码根据下拉。用户不必自己添加国家代码。
以下是电话号码输入字段与国家代码的代码:

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,
  ),
),

下面是输入字段按钮验证的代码:

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),
      ),
    ),
  ),
),
krugob8w

krugob8w1#

当您向API发送请求时,请确保您只使用电话号码(没有国家代码),并从选择菜单中获取国家代码,然后将两个数据控制器发送到所需的API,您将获得所需的响应。
enter image description here

相关问题