如何检查TextFormField是否为空

Question

我想为我的应用程序创建一个登录页面。我不想使用firebase，所以我试图用验证器伪造登录。首先，我想检查一下电子邮件和密码中是否填写了内容。否则，"登录"按钮将不起任何作用。如果填写了电子邮件和密码，则登录按钮将导航到下一页。但我真的不知道如何在我编写的代码中包含验证器。希望我能找到一些帮助。

import 'package:flutter/material.dart';
import 'package:lectureswatcher/widgets/registration.dart';
import 'package:lectureswatcher/widgets/tabs.dart';
bool emailIsFilled = false;
bool passwordIsFilled = false;
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(vertical: 30),
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft, 
colors: [
Colors.blue.shade900, 
Colors.teal.shade700, 
Colors.green.shade300,
]
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget> [
SizedBox(height: 80,),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget> [
Text('Login', style: TextStyle(color: Colors.white, fontSize: 50),),
SizedBox(height: 10,),
Text('Welcome Back', style: TextStyle(color: Colors.white, fontSize: 19),)
],
),
),
SizedBox(height: 20,),
Expanded(
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40), 
topRight: Radius.circular(40),
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50),),
),
child: Padding(
padding: EdgeInsets.all(30),
child: Column(
children: <Widget> [
SizedBox(height: 60,),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(
blurRadius: 20,
color: Color.fromARGB(73, 1, 58, 116),
offset: Offset(0, 10),
)],
),
child: Column(
children: <Widget> [
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextFormField(
decoration: InputDecoration (
hintText: "E-mail",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,                                
),
validator: (value) {
if (value == null || value.isEmpty) {
emailIsFilled == false;
return 'Text is empty';
}else if (value != null) {
emailIsFilled == true;
print(emailIsFilled);}
},
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade200))
),
child: TextFormField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
), 
validator: (value) {
if (value == null || value.isEmpty) {
passwordIsFilled == false;
return 'Text is empty';
}else if (value != null) {
passwordIsFilled == true;
print(emailIsFilled);}
},
),
),
],
),
),
SizedBox(height: 60,),
Container(
child: TextButton(
child: Text("Registrate", style: TextStyle(color: Colors.grey),),
onPressed: () { Navigator.push(
context, MaterialPageRoute(
builder: (context) => const Registration(),),);},                            
)
),                    
SizedBox(height:60,),
Container(
height: 50,
width: 300,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius:BorderRadius.circular(50),
color: Color.fromARGB(73, 1, 58, 116),
),
child: TextButton(
onPressed: () { 
if(emailIsFilled == true) {
Navigator.pushAndRemoveUntil(
context, 
MaterialPageRoute(
builder:(context) => const Tabs(), maintainState: true),
(Route<dynamic> route) => false);
;};},
child: Text("Login", style: TextStyle(color: Colors.white, fontSize: 20,fontWeight: FontWeight.bold),)
),
),
SizedBox(height:90,),
],
),
),
),
),
],
),
),
);
}
}

Answer 1

我建议使用Form小部件，用From包装您的Column或顶级小部件，并使用全局密钥进行验证。

查找有关表单/验证的更多信息

Widget build(BuildContext context) {
final _formKey = GlobalKey<FormState>();
....
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
.....
child: TextButton(
onPressed: () {
final isValid =
_formKey.currentState?.validate() ?? false;
if (isValid) {
//valid
}
},
child: Text(
"Login",

也可以选择TextEditingController

Answer 2

首先，声明一个类似TextEditingController的：

TextEditingController textEditingController = TextEditingController();

然后将其分配给您的TextFormField:

TextFormField(
controller: textEditingController,
/* your other properties*/
),

在那里，您可以检查TextFormField的文本是否为空：

if(textEditingController.text.isEmpty) {
/* here is your action code if it's empty*/
}

你可以为你想要的每个文本字段制作多个TextEditingController并控制它。