使用 Firebase 发送 OTP 时显示加载微调器答案

【问题标题】：Show a loading spinner when sending OTP using Firebase使用 Firebase 发送 OTP 时显示加载微调器
【发布时间】：2021-06-25 07:10:30
【问题描述】：

我想在用户单击“发送 OTP”按钮时显示加载微调器。我创建了一个变量_IsLoading，在调用 verifyphone 函数之前将其设置为 true，然后将其设置为 false。似乎它对 UI 没有任何影响。我怎样才能做到这一点？

如果我将 verifyPhone 替换为以下代码行，那么我会看到微调器：

await new Future.delayed(new Duration(milliseconds: 1500));

我已禁用recaptcha，因此我的应用无法导航到recaptcha 验证页面。但是微调器仍然不起作用。

 @override
  Widget build(BuildContext context) {
    return _isLoading
        ? Center(child: Loading()):Scaffold(
      appBar: AppBar(
        title: Text("OTP Verification"),
      ),
      body:SizedBox(
      width: double.infinity,
      child: Padding(
        padding:
            EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: SizeConfig.screenHeight * 0.05),
              Text(
                "OTP Verification",
                style: headingStyle,
              ),
              Text("Press Send OTP to get a 6 digit code via SMS and enter below.."),
             // buildTimer(),
              //OtpForm(),
              Form(
      child: Column(
        children: [
          SizedBox(height: SizeConfig.screenHeight * 0.15),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  autofocus: true,
                  maxLength: 1,
                  obscureText: true,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                  onChanged: (value) {
                    nextField(value, pin2FocusNode);
                  },
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  focusNode: pin2FocusNode,
                  maxLength: 1,
                  obscureText: true,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                  onChanged: (value) => nextField(value, pin3FocusNode),
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  focusNode: pin3FocusNode,
                  maxLength: 1,
                  obscureText: true,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                  onChanged: (value) => nextField(value, pin4FocusNode),
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  maxLength: 1,
                  focusNode: pin4FocusNode,
                  obscureText: true,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                    onChanged: (value) => nextField(value, pin5FocusNode),
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  autofocus: true,
                  focusNode: pin5FocusNode,
                  obscureText: true,
                  maxLength: 1,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                  onChanged: (value) {
                    nextField(value, pin6FocusNode);
                  },
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(40),
                child: TextFormField(
                  autofocus: true,
                  focusNode: pin6FocusNode,
                  maxLength: 1,
                  obscureText: true,
                  style: TextStyle(fontSize: 24),
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.center,
                  decoration: otpInputDecoration,
                 onChanged: (value) {
                    if (value.length == 1) {
                      pin6FocusNode.unfocus();
                      // Then you need to check is the code is correct or not
                    }
                  }
                ),
              ),
            ],
          ),
          SizedBox(height: SizeConfig.screenHeight * 0.15),
          DefaultButton(
            text: _isLoading?"Sending OTP...":"Send OTP",
            press: () async { 
              setState(() {
                _isLoading  = true; 
              });
                        
              verifyPhoneNumber();
               setState(() {
                _isLoading  = false; 
              });
            },
          ),
          SizedBox(), 
          DefaultButton(
            text: "Continue",
            press: () async {
               
            },
          )
        ],
      ),
    ),
              SizedBox(height: SizeConfig.screenHeight * 0.1),
              GestureDetector(
                onTap: () {
                  // OTP code resend
                },
                child: Text(
                  "Resend OTP Code",
                  style: TextStyle(decoration: TextDecoration.underline),
                ),
              )
            ],
          ),
        ),
      ),
    ));
    
  }

【问题讨论】：

标签： flutter dart firebase-authentication

【解决方案1】：

我找到了解决方案。您可以使用then

在 verifyPhoneNumber 函数中注册回调

在调用 verifyPhoneNumber 函数之前，添加：
```
 setState(() {
   _isLoading = true;
 });
```

然后在函数的回调中，将_isLoading更改为false。

     await _auth.verifyPhoneNumber(
                       phoneNumber: '+11345670033',
                       timeout: const Duration(seconds: 5),
                       verificationCompleted: verificationCompleted,
                       verificationFailed: verificationFailed,
                       codeSent: codeSent,
                       codeAutoRetrievalTimeout:
                           codeAutoRetrievalTimeout).then((value) {
                              setState(() {
                                 _isLoading = false;
                              });
                           });

【讨论】：