如何在等待来自 Firebase 的身份验证时显示圆形进度指示器

Question

我有一个由 Firebase 认证的登录页面，我想在仍在认证的同时显示一个圆形进度指示器。 我在登录按钮的 catch 块中插入了 if 语句，用于处理登录过程中可能出现的错误

如果 firebase 服务器没有引发错误，我想显示圆形指示器我是编码新手，请帮助我。

下面是登录页面的代码

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:user_details/fromJP/Scan_QR.dart';
import 'package:user_details/fromJP/load_widget.dart';
import 'Register.dart';

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final formKey = GlobalKey<FormState>();
  bool loading = false;

  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  String errorMessage;

  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _scafoldKey = GlobalKey<ScaffoldState>();
    return loading
        ? Loading()
        : Scaffold(
            key: _scafoldKey,
            appBar: AppBar(
              title: Text("Jinjer Pay"),
            ),
            body: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage("lib/bg.jpg"), fit: BoxFit.cover)),
              child: Form(
                key: formKey,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                          margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
                          padding: EdgeInsets.all(35),
                          decoration: BoxDecoration(
                              shape: BoxShape.rectangle,
                              color: Colors.white,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(20))),
                          child: Column(
                            children: <Widget>[
                              SizedBox(
                                height: 20,
                              ),
                              TextFormField(
                                decoration:
                                    new InputDecoration(hintText: "Email"),
                                keyboardType: TextInputType.emailAddress,
                                controller: _emailController,
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              TextFormField(
                                decoration:
                                    new InputDecoration(hintText: "Password"),
                                obscureText: true,
                                enableSuggestions: false,
                                controller: _passwordController,
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              RaisedButton(
                                child: Text(
                                  "Log In",
                                  style: TextStyle(fontSize: 19),
                                ),
                                color: Colors.amberAccent,
                                elevation: 10,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15)),
                                onPressed: () async {
                                  if (formKey.currentState.validate()) {
                                    setState(() => loading = true);

                                    try {
                                      UserCredential res;
                                      String userID;

                                      res = (await FirebaseAuth.instance
                                          .signInWithEmailAndPassword(
                                              email: _emailController.text,
                                              password:
                                                  _passwordController.text));
                                      userID = res.user.uid;

                                      if (res == null) {
                                        setState(() {
                                          loading = false;
                                        });
                                      }
                                      if (res != null) {
                                        Navigator.pop(context);
                                        Navigator.of(context).push(
                                          MaterialPageRoute(
                                              builder: (context) => Scan_QR()),
                                        );
                                      }
                                    } catch (e) {
                                      if (e.code == "unknown") {
                                        Fluttertoast.showToast(
                                            msg:
                                                "Email/Password Field cannot be Empty",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      if (e.code == "wrong-password") {
                                        Fluttertoast.showToast(
                                            msg: "Your password is incorrect",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      if (e.code == "invalid-email") {
                                        Fluttertoast.showToast(
                                            msg:
                                                "Email/Password Field cannot be Empty",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      if (e.code == "user-not-found") {
                                        Fluttertoast.showToast(
                                            msg:
                                                "No User found with this email",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      if (e.code == "user-disabled") {
                                        Fluttertoast.showToast(
                                            msg:
                                                "user with this email has been disabled",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      if (e.code == "too-many-requests") {
                                        Fluttertoast.showToast(
                                            msg:
                                                "Too many requests, try again later",
                                            toastLength: Toast.LENGTH_SHORT,
                                            gravity: ToastGravity.CENTER,
                                            timeInSecForIosWeb: 1,
                                            backgroundColor: Colors.redAccent,
                                            textColor: Colors.white,
                                            fontSize: 16.0);
                                      }
                                      print(e);
                                      //_emailController.text = "";
                                      _passwordController.text = "";
                                    }
                                  }
                                },
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    "Not Registered? ",
                                    style: TextStyle(fontSize: 19),
                                  ),
                                  SizedBox(width: 5),
                                  InkWell(
                                    onTap: () {
                                      Navigator.of(context).push(
                                        MaterialPageRoute(
                                            builder: (context) => Register()),
                                      );
                                    },
                                    child: Text(
                                      "Register",
                                      style: TextStyle(
                                          color: Colors.blue, fontSize: 19),
                                    ),
                                  ),
                                  SizedBox(
                                    height: 20,
                                  ),
                                ],
                              ),
                            ],
                          ))
                    ],
                  ),
                ),
              ),
            ),
          );
  }
}

Answer 1

您可以在showDialog块和Navigator.pop(context);中显示带有Center(child:CircularProgressIndicator())的try 当您成功或抛出错误时

Answer 2

您可以在初始化为 false 的小部件中创建 bool isLoading 属性。 然后在您的 function 调用中，您可以设置 state 并将您的 isLoading 更改为 true，然后再调用 firebase。 当对 firebase 的调用成功完成或引发错误时，您可以设置 state 并将 isLoading 再次更改为 false。

最后，在 UI 中，如果 isLoading 为真，您可以使用条件来显示循环进度指示器。

Answer 3

我在 catch 块的开头添加了这个块

if(FirebaseAuth.instance.currentUser.uid != e.code)
                                        {
                                          setState(() {
                                            loading = false;
                                          });
                                        }