如何将进度指示器添加到此颤动代码答案

【问题标题】：How can i add progress Indicator to this flutter code如何将进度指示器添加到此颤动代码
【发布时间】：2020-11-02 20:27:43
【问题描述】：

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

【问题讨论】：

标签： firebase flutter firebase-authentication flutter-layout flutter-dependencies

【解决方案1】：

在你的 onTap 函数中，你可以使用 Overlays

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 存储的一个，所以你必须为你的存储进行修改，尽管登录时间不应该太长，而且你可能会对旋转加载器而不是实际进度感到满意）

【讨论】：

这是您要找的吗？它对你有用吗？