尝试使用空输入验证 TextFormField,但它不起作用并在 Flutter 中弹出一些奇怪的错误 [PS:仍然是学


import 'package:flutter/material.dart';
import 'package:splash_screen/login_signup/signuppage.dart';
class LoginPage extends StatefulWidget {
static String tag = 'login-page';
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final formKey = new GlobalKey<FormState>();
String _email;
String _password;
void validateAndSave() {
final form = formKey.currentState;
if(form.validate()){
print('Login Successful');
}
else{
print('Login Failed!');
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(16.0, 90.0, 0.0, 0.0),
child: Text('Log In',
style: TextStyle(
fontSize: 40.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(125.0, 60.0, 0.0, 0.0),
child: Text('.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.green)),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
key: formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
validator: (value) => value.isEmpty
? 'Please Enter a Email Address' : 
),
SizedBox(height: 20.0),
TextFormField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
validator: (value) =>
value.isEmpty ? 'Password cannot be empty!' : null),
SizedBox(height: 5.0),
Container(
alignment: Alignment(1.0, 0.0),
padding: EdgeInsets.only(top: 15.0, left: 20.0),
child: InkWell(
child: Text(
'Forgot Password',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline),
),
),
),
SizedBox(height: 40.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.green,
elevation: 7.0,
child: GestureDetector(
onTap: () {
validateAndSave();
},
child: Center(
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
),
),
SizedBox(height: 20.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Center(
//   child:
//       ImageIcon(AssetImage('facebook.png')),
// ),
SizedBox(width: 10.0),
Center(
child: Text('Log in with facebook',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
)
],
),
),
)
],
)),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Dont have an account?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
// Navigator.of(context).pushNamed('/signup');
Navigator.push(context,
MaterialPageRoute(builder: (context) => SignupPage()));
},
child: Text(
'Register',
style: TextStyle(
color: Colors.green,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
)
],
)
],
));
}
}

因此,我试图在我的登录页面中实现TextField验证器。我有点实现了它,不知道它出了什么问题,但它显示了手势异常,我无法找到任何解决方案,甚至尝试在互联网上搜索以了解该错误的含义。

我在终端上看到的异常看起来像这样

https://i.stack.imgur.com/EqFyk.jpg

该图显示了手势异常的终端输出。

您没有使用 Form 作为 TextFormField 的父级。 将容器包装在表单小部件中。

Form(
key: formKey,
child: Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
.....

相关内容

最新更新