时间戳

首页 > 解决方案 > 如何在 Flutter 中实现 CircularProgressIndicator

flutter - 如何在 Flutter 中实现 CircularProgressIndicator

问题描述

我在等待用户完成身份验证过程时尝试实现 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);
      }
    }
  }

如何在代码中实现循环进度指示器？

标签： flutterdart

解决方案

CircularProgressIndicator 可以在带有条件的 UI 中实现。如果你想在页面的某个区域实现它，你可以使用 boolean 使其像这样工作：

 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 的示例。要打开对话框，您需要上下文，因此将 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)
        ]),
      )
    );
  }

推荐阅读