颤振TextFormField验证显示对齐错误

问题描述

我有一个TextFormField且在“空”上有验证。

为了控制高度，TextFormField嵌套在Container小部件中。

这会导致显示错误消息作为附加图片重叠的意外副作用。

要测试示例代码，请按“提交”以查看错误。

import 'package:Flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: SimpleForm(),);
  }
}

class SimpleForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();
    return SafeArea(
      child: Scaffold(
//          primary: true,body: Form(
            key: formKey,child: Column(
              children: [
                SizedBox(
                  height: 0,//            Container(height: 0,Container(
                  height: 38,margin: EdgeInsets.all(6),child: TextFormField(
                    maxLines: 1,decoration: Inputdecoration(
                      border: OutlineInputBorder(),hintText: 'Name',//                  errorStyle: TextStyle(fontSize: 0,height: 0),validator: (value) => (value.isEmpty) ? '**' : null,FlatButton(
                  child: Text('Submit'),onpressed: () {
                    formKey.currentState.validate();
                  },)
              ],)),);
  }
}

解决方法

解决方案1。您可以为helperText的{{1}}设置TextField并增加decoration的高度：

Container

解决方案2。您可以将错误消息的行高设置为0（它将显示在文本字段上方）：

Container(
  height: 60,child: TextFormField(
    maxLines: 1,decoration: InputDecoration(
      border: OutlineInputBorder(),hintText: 'Name',helperText: ' ',// this is new
    ),validator: (value) => (value.isEmpty) ? '**' : null,),

您可以使用此

   TextFormField(
  decoration: new InputDecoration(
  enabledBorder: OutlineInputBorder(                     //change border of enable textfield
  borderRadius: BorderRadius.all(Radius.circular(40.0)),borderSide: BorderSide(color: colorValue),focusedBorder: OutlineInputBorder(        //focus boarder
          borderRadius: BorderRadius.all(Radius.circular(40.0)),focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),borderSide: BorderSide(width: 1,color: Colors.red),disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),color: Colors.orange),enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),color: Colors.green),border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),)
    ),errorBorder: OutlineInputBorder(.                              //error boarder
      borderRadius: BorderRadius.all(Radius.circular(4)),color: Colors.black)
    ),isDense: true,counterText: "",contentPadding: EdgeInsets.fromLTRB(10,20,10,0),//padding according to your need
        hintText: "create new",hintStyle: TextStyle(color: colorValue,fontSize: 13)),)),

感谢答案Mobina，

似乎问题是抖动限制。暂时。

带有边框，我决定在顶部显示错误消息。（您的解决方案：1）

无边框，我可以像往常一样显示err msg。（您的解决方案：2）

// with border
            Container(
              height: 38,margin: EdgeInsets.all(6),child: TextFormField(
                textAlignVertical: TextAlignVertical.bottom,style: TextStyle(fontSize: 14),decoration: InputDecoration(
                  border: OutlineInputBorder(),errorStyle: TextStyle(height: 0),validator: (value) => (value.isEmpty) ? 'hide overlap' : null,// without border
            Container(
              height: 38,decoration: InputDecoration(
                  hintText: 'Name',30,

textformfield validation