Firebase 如何将进度指示器添加到此颤振代码

我正在使用firebase进行电话身份验证，在这里，当我单击“验证”按钮时，我想显示循环进度指示器，我如何才能做到这一点

这是我的密码

Container(
             width: verifyButton,
             child: CustomButton(msg: "verify",onTap:(){
               codeSent
                   ? AuthService().signInWithOTP(smsCode, verificationId)
                   : verifyPhone(phoneNo);
             }),
           ),

codeSent ? Padding(
      padding: EdgeInsets.only(left: 12.0, right: 12.0, bottom: 12),
      child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.black, width: 0.2),
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                    color: Colors.grey.withOpacity(0.3),
                    offset: Offset(2, 1),
                    blurRadius: 2
                )
              ]
          ),
          child: Padding(
            padding: const EdgeInsets.only(left: 25.0, right: 25.0),
            child: TextFormField(
              keyboardType: TextInputType.phone,
              decoration: InputDecoration(hintText: 'Enter OTP'),
              onChanged: (val) {
                setState(() {
                  this.smsCode = val;
                });
              },
            ),
          )))

---

在onTap函数中，可以使用覆盖

Overlay.of(context).insert(_yourCustomOverlayEntry)
await AuthService().yourFunction
_yourCustomOverlayEntry.remove();

您可以初始化_yourCustomOverlayEntry字段：

OverlayEntry _yourCustomOverlayEntry =
      OverlayEntry(builder: (context) => YourCustomLoader(), opaque: false);

我个人使用Flatter_spinkit来制作加载程序，但您也可以使用内置的CircularProgressIndicator（检查Flatter API）

更新：

然后，您可以在firebase任务上使用侦听器来更新进度

task.events.listen((event) {
  final double progress =
          event.snapshot.bytesTransferred / event.snapshot.totalByteCount;
      setState(() {
        _progress = progress;
      });
  });

并在进度指示器中使用双进度

---

（这是我用来上传到firebase存储的一个，因此您必须为自己的进行修改，尽管登录时间不应该太长，而且您可能会喜欢使用旋转加载程序而不是实际的进度）

这就是您想要的吗？对你有用吗？