如何去除Flutter中TextFormField的错误信息

问题描述 投票：0回答：12

如何删除验证器创建的

TextFormField
中的错误消息？我只想要红色边框，因为我没有空间来显示错误。

bool error = false;
 TextFormField ( 
      hintText:error?'please input productName':'',
      hintStyle:TextStyle(color: Colors.red), 
      validator:(v){  
       v.trim().length>0?error=false:error=true; return null; 
      }
 )
flutter dart flutter-layout
12个回答
84
投票

尝试下面的代码。 错误文本没有大小调整，只有红色的字段边框。

 TextFormField(
  decoration: InputDecoration(
    errorStyle: TextStyle(height: 0),
  ),
);
11
投票

这对我有用。我喜欢它的结果。

没有尺寸调整或类似的情况发生。

在 

TextFormField
...

的构造函数中 
decoration: InputDecoration(
        isDense: true,
        contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        errorMaxLines: 1,
        errorText: '',
        errorStyle: TextStyle(
          color: Colors.transparent,
          fontSize: 0,
          ),
         ),

如果您愿意，您可以在 SnackBar 上显示错误...

9
投票

您可以返回一个空字符串，如果无效，该字符串仍会将边框标记为红色

 validator: (String value) {
      if (value.isEmpty) {
          return '';
     }
},

我解决这个问题的方法是用 SizedBox 包裹 TextField 并给出固定的高度，然后想要扩展并显示错误消息

 SizedBox(
      height: SOME_FIXED_HEIGHT_INCLUDING_ERROR_MESSAGE'S_HEIGHT,
      child: TextField()
6
投票

这对我来说非常适合。看起来很干净，当然，尽管您丢失了来自验证的错误信息。

TextFormField(
  decoration: const InputDecoration(
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
    errorStyle: TextStyle(height: 0),
  ),
  validator: (_) => error ? '' : null,
  ),
6
投票

只需将 

height
 中的
0
 设置为
errorStyle

InputDecoration(errorStyle: TextStyle(height: 0)),
2
投票

您可以通过两种方式做到这一点：

  • 设置
    fontSize: 0.1
    （解决方法）：

    TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (input) {
    if (input == null || input.length < 3) return 'Too short';
    return null;
  },
  // This is the hack!
  decoration: InputDecoration(errorStyle: TextStyle(fontSize: 0.1)),
)

  • 使用
    FormField
    ：

    FormField<String>(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (input) {
    if (input == null || input.length < 3) return 'Too short';
    return null;
  },
  builder: (field) {
    final border = field.hasError
        ? UnderlineInputBorder(
            borderSide: BorderSide(color: Theme.of(context).colorScheme.error),
          )
        : null;

    return TextField(
      onChanged: field.didChange,
      decoration: InputDecoration(
        enabledBorder: border,
        focusedBorder: border,
      ),
    );
  },
)
1
投票

只需输入辅助文本即可

TextFormField(
  decoration: const InputDecoration(
    helperText: ' ',
  ),
  validator: myValidator,
),
1
投票
errorStyle: const TextStyle(height: 0.01),

我将 TextStyle 的高度设置为 0.01 或 0.001。这对我有用。

但我认为这不是正常的方式。

0
投票

这不是一个更干净的方法，但现在我使用带有布尔变量的

error
选项，然后在hintText中如果错误传递错误消息，否则
""
。另外，文本的颜色应该取决于您的错误变量。

在下面找到一个例子

 final emailFieldColor =
        this._emailError == null ? //pass color: //pass error color;

               TextField(
                    controller: controllerName, //to access value
                    textAlign: TextAlign.left,
                    decoration: InputDecoration(
                      labelText: this._emailError == null
                            ? "Email"
                            : this._emailError,
                      labelStyle: TextStyle(color: emailFieldColor),
                      border: InputBorder.none,
                      hintText: this._emailError == null
                            ? "hint text"
                            : this._emailError,
                      hintStyle: TextStyle(color: 
                                this._emailError == null
                                ? //color1
                                : //color2),
                    ),
                  ),
0
投票
hintText: validation ? NAME_TEXT_FIELD_HINT : 'Name is required!',
              hintStyle: TextStyle(fontSize: 17.0),
              errorStyle: TextStyle(height: 0),
              contentPadding:
                  EdgeInsets.symmetric(horizontal: 32.0, vertical: 14.0)),
          validator: (String value) {
            if (value.trim().isEmpty) {
              setState(() {
                validation = false;
              });
              return '';
            }
            return null;

这对我有用，将高度设置为 0 + 创建一个布尔值，使错误文本替换提示文本（这也可以用于标签文本）我想

0
投票

我知道已经晚了，但也许它对某人有帮助，我一一设置了我喜欢的方式，我的意思是，每个边框和消息都是这样的：

 TextFormField(
                          controller: controller.emailController,
                          decoration: InputDecoration(
                            errorBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.only(
                                topRight: Radius.elliptical(120, 120),
                              ),
                            ),
                            disabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.only(
                                topRight: Radius.elliptical(120, 120),
                              ),
                            ),
                            focusedErrorBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.grey),
                              borderRadius: BorderRadius.only(
                                topRight: Radius.elliptical(120, 120),
                              ),
                            ),
                            errorStyle:
                                TextStyle(height: 0, color: Colors.amber),
                            prefixIcon: Icon(Icons.person),
                            hintText: 'Username',
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.only(
                                topRight: Radius.elliptical(120, 120),
                              ),
                            ),
                            //fillColor: Colors.green
                          ),
                          autofocus: true,
                          keyboardType: TextInputType.emailAddress,
                          validator: (value) => '',
                          onSaved: controller.onEmailSaved,
                          onFieldSubmitted: controller.requestPasswordFocus,
                        ),

现在所有这些都是一样的，错误消息的高度也为 0，因此它不会破坏我的表单，并且当有人到达上面时消息是空的。

0
投票

所以我使用了 0.1 高度的 hack，但发现如果你连续有 2 个相邻的，你仍然会得到一个比另一个高的结果，我还必须将辅助文本设置为 0.1

 decoration: InputDecoration(
        errorStyle: TextStyle(height: 0.1),
        helperText: '',
        helperStyle: TextStyle(height: 0.1),
      ),
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.