Flutter TextFormField 验证未显示，并且给出非活动输入连接的错误

Question

所以，我一直在寻找一种方法来解决Flutter TextFormField不显示验证器错误消息的问题。 这是我的注册屏幕代码

import 'package:flutter/material.dart';
import 'package:messenger/widgets/widget.dart';
class SignUp extends StatefulWidget {
@override
_SignUpState createState() => _SignUpState();
}
class _SignUpState extends State<SignUp> {
final formKey= GlobalKey<FormState>();
TextEditingController usernameTextEditingController= new TextEditingController();
TextEditingController emailTextEditingController= new TextEditingController();
TextEditingController passwordTextEditingController= new TextEditingController();
String value;
bool isLoading=false;
signMeUp(){
if(formKey.currentState.validate()){
setState(() {
isLoading=true;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black87,
appBar: appBarMain(context),
body: isLoading?Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.1,0.5,0.8,1],
colors: [Colors.yellow,Colors.orangeAccent,Colors.deepOrange, Colors.redAccent]),
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.symmetric(horizontal: 24),
padding: EdgeInsets.symmetric(horizontal: 20),
alignment: Alignment.center,
child: CircularProgressIndicator(),):Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.1,0.3,0.7,1],
colors: [Colors.yellow,Colors.orangeAccent,Colors.deepOrange, Colors.redAccent]),
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.symmetric(horizontal: 24),
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Form(
key: formKey,
child: Column(
children: <Widget>[
TextFormField(
validator: (val){
return val.isNotEmpty || val.length < 4 ? val="Username is not valid":val =null;
},
autofocus: false,
controller: usernameTextEditingController,
style: textFieldTextStyle(),
decoration: textFieldInputDecoration("Username"),
),
TextFormField(
validator: (val){
return RegExp(r'^.+@[a-zA-Z]+.{1}[a-zA-Z]+(.{0,1}[a-zA-Z]+)$').hasMatch(val)? null:"Email Id is not valid";
},
autofocus: false,
controller: emailTextEditingController,
style: textFieldTextStyle(),
decoration: textFieldInputDecoration("Email"),
),
TextFormField(
obscureText: true,
validator: (val){
return val.length>6?null:"Password should be greater than 6 characters";
},
controller: passwordTextEditingController,
style: textFieldTextStyle(),
decoration: textFieldInputDecoration("Password"),
),
],
),
),
SizedBox(height: 15,),
Container(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16,vertical: 8),
alignment: Alignment.bottomCenter,
child: Text("By clicking Sign Up, you agree to our Policies",style: TextStyle(color: Colors.white,fontSize: 13,fontWeight: FontWeight.w300))),
),
SizedBox(height: 15,),
GestureDetector(
onTap: (){
signMeUp();
},
child: Container(
child: buttonToUse("Sign Up",Colors.orangeAccent)
),
),
SizedBox(height: 4,),
Container(
child: buttonToUse("Sign Up with Google",Colors.lightBlueAccent)
),
SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Already have an Account?  ",style: textFieldTextStyle(),),
GestureDetector(
onTap: (){
Navigator.pop(context);
},
child: Text("Sign In",style: TextStyle(color: Colors.white,fontSize: 16,fontWeight: FontWeight.w400,
decoration: TextDecoration.underline)),
),
],
),
SizedBox(height: 30,)
],
),
),
);
}
}

以及我在这些表单字段中键入内容时遇到的错误

W/IInputConnectionWrapper(10562): beginBatchEdit on inactive InputConnection
W/IInputConnectionWrapper(10562): endBatchEdit on inactive InputConnection
W/IInputConnectionWrapper(10562): setComposingRegion on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): requestCursorAnchorInfo on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextBeforeCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): getSelectedText on inactive InputConnection
W/IInputConnectionWrapper(10562): getTextAfterCursor on inactive InputConnection
W/IInputConnectionWrapper(10562): beginBatchEdit on inactive InputConnection
W/IInputConnectionWrapper(10562): endBatchEdit on inactive InputConnection

另外，我在应用程序上没有看到任何验证器错误，这是屏幕截图 即使按下标志后也没有红线显示错误 向上屁股

顺便说一句，如果我能得到您对更好的 UI 的看法，那就太好

了

Answer 1

如果您希望在用户键入时显示验证错误，则必须将窗体的autovalidate属性设置为true。

关于您的 UI 状态，我不建议在true时用加载指示器替换整个视图isLoading。我建议您更改注册按钮。如果您希望整个屏幕在加载时无法访问，则必须使用各种平视显示对话框。这将使整个屏幕可见，但用户将无法与表单元素进行交互。 您可以查看此库modal_progress_hud

此外，考虑到您正在使用的渐变，使用默认的红色来显示错误文本可能不是最好的，请尝试使用其他一些颜色来提高错误消息的可见性