Question

我正在使用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;
                });
              },
            ),
          )))

Answer 1

在onTap函数中，您可以使用叠加层

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

您可以初始化_yourCustomOverlayEntry字段：

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

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

更新：

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

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

在进度指示器中使用双_progress。

（这是我用来上传到Firebase存储的一个文件，因此您必须为自己的文件进行修改，尽管登录时间不会太长，并且您可能会对自旋加载器而不是实际的过程感到满意）

我如何向该Flutter代码添加进度指示器

1 个答案: