Flutter 颤振:TextFormField验证程序打破了字段的样式

Flutter 颤振:TextFormField验证程序打破了字段的样式,flutter,Flutter,我有这个TextFormField,我正在实现一个登录/注册屏幕。问题是,当验证程序将错误弹出到屏幕上时,TextFormField的边框会从圆形变为方形。我怎样才能打印出错误?我在考虑打印整个表单上方或下方的所有内容,但是如何使用Valdiator属性进行打印呢? 还是有更有效的方法 TextFormField所在的ListView似乎也在这个过程中被破坏了,这使得在验证程序在屏幕上打印出来后输入非常烦人 只有TextFormField: TextFormField(

我有这个TextFormField,我正在实现一个登录/注册屏幕。问题是,当验证程序将错误弹出到屏幕上时,TextFormField的边框会从圆形变为方形。我怎样才能打印出错误?我在考虑打印整个表单上方或下方的所有内容,但是如何使用Valdiator属性进行打印呢? 还是有更有效的方法

  • TextFormField所在的ListView似乎也在这个过程中被破坏了,这使得在验证程序在屏幕上打印出来后输入非常烦人

  • 只有TextFormField:

    TextFormField(
                      validator: (String str) =>
                          str.isEmpty ? 'Enter a username' : null,
                      decoration: InputDecoration(
                        hintText: 'theChadMaster76',
                        hintStyle: TextStyle(
                          fontStyle: FontStyle.italic,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        focusedBorder: OutlineInputBorder(
                          //focusBorder changes or not when user first clicks on the field
                          borderSide: BorderSide(color: Colors.blueAccent),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        prefixIcon: Icon(Icons
                            .account_circle), //make the icon also change its color
                        filled: true,
                        fillColor: Colors.grey.shade200,
                      ),
                      textAlign: TextAlign.center,
                      textAlignVertical: TextAlignVertical.bottom,
                      onChanged: (String str) {
                        setState(() {
                          userName = str;
                        });
                      },
                    ),
    
    
    整个文件:

    class RegistrationScreen extends StatefulWidget {
      static const String id = 'registration_screen';
      @override
      _RegistrationScreenState createState() => _RegistrationScreenState();
    }
    
    class _RegistrationScreenState extends State<RegistrationScreen> {
      final AuthService _auth = AuthService();
      final _formKey = GlobalKey<FormState>();
      bool loading = false;
      String error = '';
    
      String userName = "";
      String email = "";
      String password = "";
      @override
      Widget build(BuildContext context) {
        return loading ? Loading() : Scaffold(
          appBar: AppBarModel(),
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30.0),
            child: Center(
              child: Form(
                key: _formKey,
                child: ListView(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 50.0),
                      child: Center(child: Text('add logo')),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
                      child: Text(
                        'Username:',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.w600,
                          //fontStyle: FontStyle.italic,
                        ),
                      ),
                    ),
                    TextFormField(
                      validator: (String str) =>
                          str.isEmpty ? 'Enter a username' : null,
                      decoration: InputDecoration(
                        hintText: 'theChadMaster76',
                        hintStyle: TextStyle(
                          fontStyle: FontStyle.italic,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        focusedBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.blueAccent),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        prefixIcon: Icon(Icons
                            .account_circle), //make the icon also change its color
                        filled: true,
                        fillColor: Colors.grey.shade200,
                      ),
                      textAlign: TextAlign.center,
                      textAlignVertical: TextAlignVertical.bottom,
                      onChanged: (String str) {
                        setState(() {
                          userName = str;
                        });
                      },
                    ),
                    SizedBox(height: 30.0),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
                      child: Text(
                        'Email:',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.w600,
                          //fontStyle: FontStyle.italic,
                        ),
                      ),
                    ),
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      validator: (String str) =>
                          str.isEmpty ? 'Enter an email' : null,
                      decoration: InputDecoration(
                        hintText: 'bobbyBob@gmail.com',
                        hintStyle: TextStyle(
                          fontStyle: FontStyle.italic,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        focusedBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.blueAccent),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        prefixIcon:
                            Icon(Icons.mail),
                        filled: true,
                        fillColor: Colors.grey.shade200,
                      ),
                      textAlign: TextAlign.center,
                      textAlignVertical: TextAlignVertical.bottom,
                      onChanged: (String str) {
                        setState(() {
                          email = str;
                        });
                      },
                    ),
                    SizedBox(height: 30.0),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
                      child: Text(
                        'Password:',
                        style: TextStyle(
                          fontSize: 18.0,
                          fontWeight: FontWeight.w600,
                          //fontStyle: FontStyle.italic,
                        ),
                      ),
                    ),
                    TextFormField(
                      validator: (String str) =>
                          str.length < 6 ? 'Enter an password 6+ char' : null,
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: 'secretPassword123!',
                        hintStyle: TextStyle(
                          fontStyle: FontStyle.italic,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        focusedBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.blueAccent),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        prefixIcon: Icon(Icons.memory),
                        filled: true,
                        fillColor: Colors.grey.shade200,
                      ),
                      textAlign: TextAlign.center,
                      textAlignVertical: TextAlignVertical.bottom,
                      onChanged: (String str) {
                        setState(() {
                          password = str;
                        });
                      },
                    ),
                    SizedBox(
                      height: 50.0,
                    ),
                    Center(
                      child: FlatButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(30.0),
                          side: BorderSide(color: Colors.green.shade400),
                        ),
                        color: Colors.green.shade400,
                        textColor: Colors.grey.shade300,
                        padding:
                            EdgeInsets.symmetric(horizontal: 120.0, vertical: 10.0),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            'SUBMIT',
                            style: TextStyle(
                              fontSize: 18.0,
                              letterSpacing: 4.0,
                              fontStyle: FontStyle.italic,
                            ),
                          ),
                        ),
                        onPressed: () async {
                          if (_formKey.currentState.validate()) {
                            setState(() {
                              loading = true;
                            });
                            dynamic result = await _auth.registerWithEmailPassUser(
                                email, password);
                            if (result == null) {
                              setState(() {
                                loading = false;
                                error = "please supply a valid email";
                              });
                            }
                          }
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    
    类注册屏幕扩展StatefulWidget{
    静态常量字符串id='registration_screen';
    @凌驾
    _RegistrationScreenState createState()=>_RegistrationScreenState();
    }
    类注册状态扩展状态{
    最终AuthService_auth=AuthService();
    final _formKey=GlobalKey();
    布尔加载=假;
    字符串错误=“”;
    字符串userName=“”;
    字符串email=“”;
    字符串密码=”;
    @凌驾
    小部件构建(构建上下文){
    返回加载?加载():脚手架(
    appBar:AppBarModel(),
    主体:填充物(
    填充:常量边集。对称(水平:30.0),
    儿童:中心(
    孩子:表格(
    键:_formKey,
    子:ListView(
    儿童:[
    填充物(
    填充:常量边集。对称(垂直:50.0),
    子项:居中(子项:文本(“添加徽标”),
    ),
    填充物(
    填充:仅限常量边集(左:20.0,下:10.0),
    子:文本(
    '用户名:',
    样式:TextStyle(
    字体大小:18.0,
    fontWeight:fontWeight.w600,
    //fontStyle:fontStyle.italic,
    ),
    ),
    ),
    TextFormField(
    验证程序:(字符串str)=>
    str.isEmpty?“输入用户名”:null,
    装饰:输入装饰(
    hintText:“ChadMaster76”,
    hintStyle:TextStyle(
    fontStyle:fontStyle.italic,
    ),
    enabledBorder:OutlineInputBorder(
    borderSide:borderSide(颜色:Colors.green),
    边界半径:边界半径。圆形(35.0),
    ),
    聚焦顺序:大纲输入边框(
    borderSide:borderSide(颜色:Colors.blueAccent),
    边界半径:边界半径。圆形(35.0),
    ),
    前缀图标:图标(图标
    .account\u circle),//使图标也更改其颜色
    是的,
    fillColor:Colors.grey.shade200,
    ),
    textAlign:textAlign.center,
    textAlignVertical:textAlignVertical.bottom,
    onChanged:(字符串str){
    设置状态(){
    用户名=str;
    });
    },
    ),
    尺寸箱(高度:30.0),
    填充物(
    填充:仅限常量边集(左:20.0,下:10.0),
    子:文本(
    “电子邮件:”,
    样式:TextStyle(
    字体大小:18.0,
    fontWeight:fontWeight.w600,
    //fontStyle:fontStyle.italic,
    ),
    ),
    ),
    TextFormField(
    键盘类型:TextInputType.emailAddress,
    验证程序:(字符串str)=>
    str.isEmpty?“输入电子邮件”:null,
    装饰:输入装饰(
    hintText:'bobbyBob@gmail.com',
    hintStyle:TextStyle(
    fontStyle:fontStyle.italic,
    ),
    enabledBorder:OutlineInputBorder(
    borderSide:borderSide(颜色:Colors.green),
    边界半径:边界半径。圆形(35.0),
    ),
    聚焦顺序:大纲输入边框(
    borderSide:borderSide(颜色:Colors.blueAccent),
    边界半径:边界半径。圆形(35.0),
    ),
    前缀:
    图标(Icons.mail),
    是的,
    fillColor:Colors.grey.shade200,
    ),
    textAlign:textAlign.center,
    textAlignVertical:textAlignVertical.bottom,
    onChanged:(字符串str){
    设置状态(){
    email=str;
    });
    },
    ),
    尺寸箱(高度:30.0),
    填充物(
    填充:仅限常量边集(左:20.0,下:10.0),
    子:文本(
    '密码:',
    样式:TextStyle(
    字体大小:18.0,
    fontWeight:fontWeight.w600,
    //fontStyle:fontStyle.italic,
    ),
    ),
    ),
    TextFormField(
    验证程序:(字符串str)=>
    str.length<6?“输入密码6+char”:null,
    蒙昧文字:对,
    装饰:输入装饰(
    hintText:“secretPassword123!”,
    hintStyle:TextStyle(
    fontStyle:fontStyle.it
    
    errorBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.red),
                          borderRadius: BorderRadius.circular(35.0),
                        )
    
    TextFormField(
                      validator: (String str) =>
                          str.isEmpty ? 'Enter a username' : null,
                      decoration: InputDecoration(
                        hintText: 'theChadMaster76',
                        hintStyle: TextStyle(
                          fontStyle: FontStyle.italic,
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        focusedBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.blueAccent),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        errorBorder: OutlineInputBorder(
    
                          borderSide: BorderSide(color: Colors.red),
                          borderRadius: BorderRadius.circular(35.0),
                        ),
                        prefixIcon: Icon(Icons
                            .account_circle), //make the icon also change its color
                        filled: true,
                        fillColor: Colors.grey.shade200,
                      ),
                      textAlign: TextAlign.center,
                      textAlignVertical: TextAlignVertical.bottom,
                      onChanged: (String str) {
                        setState(() {
                          userName = str;
                        });
                      },
                    )
    
    errorBorder: OutlineInputBorder(
       borderSide: BorderSide(color: Colors.red),
       borderRadius: BorderRadius.circular(35.0),
    ),
    focusedErrorBorder: OutlineInputBorder(
       borderSide: BorderSide(color: Colors.red),
       borderRadius: BorderRadius.circular(35.0),
    ),