user-interface - 在flutter中我们怎样才能让验证错误消息看起来漂亮

Question

我正在申请。我分享的登录页面的用户界面。在此我使用了验证，因此它在文本表单字段下方以红色显示验证消息，但它看起来非常难看。有什么方法可以让这个验证错误消息在屏幕上看起来非常好，就像我们在本地使用不同的库一样？

Answer 1

您可以通过InputDecoration自定义表单中的文本字段装饰。小部件，如本例所示:

您的TextFormField小部件:

TextFormField(
  controller: controller,
  decoration: InputDecoration(
    labelText: "Example",
    labelStyle: TextStyle(color: Colors.black),
    errorStyle: TextStyle(color: Colors.red),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),  
    ),
  ),
  validator: (value) {
    if (value == null || value == '') {
      return "Error";
    }
  },
)

特别是您可以看到这两个属性:

• errorBorder property
• errorStyle property