添加CircularProgressIndicator用于登錄？

在我的應用中，我有一個連接到 Firebase 的登錄頁面。我可以成功登錄，但是在登錄時，我想顯示一個 CircularProgressIndicator 直到登錄成功。

  void signIn(String email, String password) async {
    if (_formKey.currentState!.validate()) {
      await _auth
          .signInWithEmailAndPassword(email: email, password: password)
          .then((_userDoc) => {
                checkUserType(_userDoc.user!.uid),
              })
          .catchError((e) {
        print('Error');
        );
      });
    }
  }

uj5u.com熱心網友回復：

創建一個isLoading變數，在登錄開始時將其狀態設定為 true，并在承諾完成后設定為 false。然后顯示CircularProgressIndicatorwhileisLoading = true

uj5u.com熱心網友回復：

這將CircularProgressIndicator在加載時替換登錄按鈕。

  void signIn() async {
    setState(() {
      isLoading = true;
    });

    Future.delayed(Duration(seconds: 1)).then((value) {
      /// loginOperationhere
 
     //end of login set false, also include on catch method
      setState(() {
        isLoading = false;
      });
    });
  }

  bool isLoading = false; // on state class level 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        isLoading
            ? CircularProgressIndicator()
            : ElevatedButton(
                onPressed: () {
                  signIn();
                },
                child: Text("login"),
              )
      ],
    ));
  }
}

uj5u.com熱心網友回復：

試試下面的代碼希望它對你有幫助。

創建布爾變數

   bool _isLoading = false;

你的小部件：

 Center(
    child: !_isLoading
        ? Container(
            width: MediaQuery.of(context).size.width,
            height: 50.0,
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            margin: EdgeInsets.only(top: 15.0),
            // ignore: deprecated_member_use
            child: ElevatedButton(
              child: Text(
                'Sign In',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // Your Login function call
                setState(() {
                  _isLoading = true;
                });
              },
            ),
          )
        : CircularProgressIndicator(),
  ),

您使用 Center 的小部件：

 !_isLoading
      ? Center(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 50.0,
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            margin: EdgeInsets.only(top: 15.0),
            // ignore: deprecated_member_use
            child: ElevatedButton(
              child: Text(
                'Sign In',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // Your Login function call
                setState(() {
                  _isLoading = true;
                });
              },
            ),
          ),
        )
      : Center(
          child: CircularProgressIndicator(),
        ),

按下按鈕之前的結果螢屏 ->

Your result screen after button pressed->

標籤：火力基地 扑 镖 Firebase 身份验证

上一篇：我可以在網頁中使用的影像檔案名中包含%嗎？

下一篇：Firebase：如何根據時間戳鍵洗掉節點內的專案范圍？