如何在使用firebase登录时在按钮中显示加载微调器

Question

我创建了一个变量">isLoading"；用于调用加载器。实际的问题是当我在登录"；在测试字段中没有给出任何值的按钮，它将在延迟时间内开始加载我如何才能停止这种情况，并在点击">登录"；按钮，但没有给定任何值。。。。这是我的回购：食品配送应用

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import '../../config/constants.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final emailController = TextEditingController();
final passwordController = TextEditingController();
@override
void dispose() {
emailController.dispose();
passwordController.dispose();
super.dispose();
}
bool isLoading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text('login'),
htspace20,
TextField(
controller: emailController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
label: Text('Email'),
),
),
htspace20,
TextField(
controller: passwordController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
label: Text('Password'),
),
),
htspace40,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(onPressed: () {}, child: const Text('Sign up'))
],
),
SizedBox(
width: double.maxFinite,
height: 40,
child: ElevatedButton(
style: ButtonStyle(
elevation: MaterialStateProperty.all(0),
),
child: isLoading
? const SizedBox(
height: 30,
width: 30,
child: CircularProgressIndicator(
strokeWidth: 3, color: Colors.white),
)
: const Text('Sign in'),
onPressed: () {
setState(() {
isLoading = true;
});
signIn();
Future.delayed(const Duration(seconds: 3), () {
setState(() {
if (emailController.text != " " ||
passwordController.text != " ") {
isLoading = false;
} else {
isLoading = true;
}
});
});
}),
)
],
),
),
);
}
Future signIn() async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text.trim(),
);
} catch (e) {
print('Email or Password Incorrect');
}
}
}

Answer 1

为什么不在你的singIn((函数中尝试一下呢：

Future signIn() async {
try {
isLoading = true;
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: emailController.text.trim(),
password: passwordController.text.trim(),
);
isLoading = false;
} catch (e) {
isLoading = false;
print('Email or Password Incorrect');
}
}

这样，如果电子邮件或通行证不正确或丢失等，它将停止加载。如果没有填写电子邮件和通行证，我也会禁用登录按钮。阻止它们传递空白值。

Answer 2

ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), // <-- Radius
),
),
child: isLoading
? const SizedBox(
height: 30,
width: 30,
child: CircularProgressIndicator(
strokeWidth: 3, color: Colors.white),
)
: const Text('Sign in'),
onPressed: () {
setState(() {
isLoading = true;
});
signIn();
Future.delayed(const Duration(seconds: 3), () {
setState(() {
if (emailController.text != " " ||
passwordController.text != " ") {
isLoading = false;
} else {
isLoading = true;
}
});
});
}),

它还显示按钮上的循环加载