[英]How to display a circular progress indicator whilst waiting for Authentication from Firebase
I have a sign-in page that is authenticated by Firebase, and I want to display a circular progress indicator whilst is still authenticating.我有一个由 Firebase 认证的登录页面,我想在仍在认证的同时显示一个圆形进度指示器。 I inserted if statements in the catch block of the sign-in button that handles the errors that may occur within the signing in process
我在登录按钮的 catch 块中插入了 if 语句,用于处理登录过程中可能出现的错误
I want to display the circular indicator if there's is no error that is thrown by the firebase Server I am new to coding, please help me.如果 firebase 服务器没有引发错误,我想显示圆形指示器我是编码新手,请帮助我。
Below is a code of the sign-in page下面是登录页面的代码
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,
),
],
),
],
))
],
),
),
),
),
);
}
}
You can showDialog
with Center(child:CircularProgressIndicator())
in try
block and Navigator.pop(context);
您可以在
showDialog
块和Navigator.pop(context);
中显示带有Center(child:CircularProgressIndicator())
的try
when you succeeded or get thrown error当您成功或抛出错误时
You can create a bool isLoading property in your widget that initializes to false.您可以在初始化为 false 的小部件中创建 bool isLoading 属性。 then in your function call you can set the state and change your isLoading to true before making the call to firebase.
然后在您的 function 调用中,您可以设置 state 并将您的 isLoading 更改为 true,然后再调用 firebase。 when the call to firebase completes either successfully or throws an error you can then set the state and change isLoading to false again.
当对 firebase 的调用成功完成或引发错误时,您可以设置 state 并将 isLoading 再次更改为 false。
Finally, in the UI you can use conditionals to show a circular progress indicator if isLoading is true.最后,在 UI 中,如果 isLoading 为真,您可以使用条件来显示循环进度指示器。
I added this block at the beginning of the catch block我在 catch 块的开头添加了这个块
if(FirebaseAuth.instance.currentUser.uid != e.code)
{
setState(() {
loading = false;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.