Flutter TextFormField Validation 未显示，并给出非活动 InputConnections 的错误

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

另外，我在我的应用程序上没有看到任何验证器错误 这是一个屏幕截图 There is no red lines showing the error even after pressing the sign Up buttom

顺便说一句，如果我能得到你对更好的用户界面的看法，那就太好了

Answer 1

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

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

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