如何將進度指示器添加到此 flutter 代碼

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 function 中，您可以使用 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;
      });
  });

並在進度指示器中使用 double _progress。

（這是我用於上傳到 firebase 存儲的一個，因此您必須為您的存儲進行修改，盡管登錄時間不應該太長，您可能會對旋轉加載程序而不是實際進度感到滿意）