如何在 Flutter 中實現 CircularProgressIndicator

Question

我正在嘗試在等待用戶完成身份驗證過程時實現 CircularProgressIndicator，這是代碼，我使用 Firebase 作為身份驗證后端

 Future<void> signIn() async {
    if (_formKey.currentState.validate()) {
      new Loading();
      _formKey.currentState.save();
      try {
        final user = await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);
        if (user != null) {
          final FirebaseUser user = await auth.currentUser();
          print('success login');
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Home(user: user),
              ));
        }
      } catch (e) {
        print(e);
      }
    }
  }

如何在代碼中實現circularprogressindicator？

Answer 1

CircularProgressIndicator 可以在帶有條件的 UI 中實現。如果您想在頁面的某些區域中實現它，您可以使用布爾值使其像這樣工作：

 bool showCircular = false;

  Future<void> signIn() async {
    if (_formKey.currentState.validate()) {
      new Loading();
      _formKey.currentState.save();
      setState(() {
        showCircular=true;
       });
      try {
        final user = await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);
        if (user != null) {
          final FirebaseUser user = await auth.currentUser();
         setState(() {
           showCircular=false;
         });
          print('success login');
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Home(user: user),
              ));
        }
      } catch (e) {
        print(e);
      }
    }
  }

現在在你的 UI 中的任何地方添加這個小部件：

showCircular ? CircularProgressIndicator() : SizedBox(),

推薦的方法是使用AlertDialog來顯示進度指示器。 這是一個 AlertDialog 的例子。要打開 Dialogs，你需要上下文，所以將 BuildContext 作為參數並調用 signIn(context); 從登錄按鈕開始。我們將使用openLoadingDialog函數調用對話框，當登錄完成時，我們將使用Navigator.of(context).pop();彈出它。

Future<void> signIn(BuildContext context) async {
    if (_formKey.currentState.validate()) {
      new Loading();
      _formKey.currentState.save();
            openLoadingDialog(context, 'Signing In...');

      try {
        final user = await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);
        if (user != null) {
          final FirebaseUser user = await auth.currentUser();
         Navigator.of(context).pop();
          print('success login');
          Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Home(user: user),
              ));
        }
      } catch (e) {
        print(e);
      }
    }
  }

將此對話框粘貼到您的應用程序中的任何位置。您可以通過傳遞要顯示的上下文和消息來調用它。

 openLoadingDialog(BuildContext context, String text) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => AlertDialog(
        content: Row(children: <Widget>[
          SizedBox(
            width: 30,
            height: 30,
            child: CircularProgressIndicator(
              strokeWidth: 1,
              valueColor: AlwaysStoppedAnimation(Colors.black)
            )
          ),

          SizedBox(width: 10),

          Text(text)
        ]),
      )
    );
  }