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中实现。如果要在页面的某些区域中实现它，可以使用boolean使其工作如下：

<color name="transparent">#00000000</color>

现在在用户界面的任何位置添加此小部件：

 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);
      }
    }
  }

推荐的方式是使用 AlertDialog 显示进度指示器。这是AlertDialog的示例。要打开对话框，您需要上下文，因此将BuildContext作为参数并调用signIn（context）;。从登录按钮开始。我们将使用 openLoadingDialog 函数调用对话框，并在登录完成后使用 Navigator.of（context）.pop（）; >

showCircular ? CircularProgressIndicator() : SizedBox(),

将此对话框粘贴到应用程序中的任何位置。您可以通过传递要显示的上下文和消息来调用它。

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);
      }
    }
  }

如何在Flutter中实现CircularProgressIndicator

1 个答案: