在 Flutter 的 TextField 下显示错误

Question

Material 设计允许文本字段通过输入框下方的红色小标签指示错误：https://material.io/components/text-fields（请参见下面的屏幕截图）。

有没有办法在 Flutter 中实现 TextField 字段？我预计这是 TextField 或 TextEditingController 的属性，但没有找到类似的东西。

Answer 1

它出现在 TextField 的装饰属性中，您也可以使用它的样式属性.

来设置它的样式

     TextField(
        decoration: InputDecoration(
          errorStyle: TextStyle(),
          errorText: 'Please enter something'
        ),
      ),

Answer 2

您根据由 TextFormField 提供的验证器函数 return 编辑的验证结果显示错误，您在那里检查一些条件，并 return 根据您的内容显示错误消息或空值想要展示什么时候，或者如果你不想展示任何东西。

child: new TextFormField(
  autocorrect: false,
  validator: (value) {
    if (value.isEmpty) {
      return 'Error Message';
    }
    return null;
  },
  onSaved: (val) => //do something...,
  decoration: new InputDecoration(labelText: "Label*"),
),

在 Flutter 的 TextField 下显示错误

Showing an error under a TextField in Flutter

flutter

flutter-text