Question

我有一个带有边框装饰的文本框。文本字段也具有验证器属性。我的问题是，当我单击提交并显示验证错误消息时，文本字段边框消失了。我真的不知道对此有何解决方法。

低是我的代码：

class _RegisterPageState extends State<RegisterPage> {
  final _key = GlobalKey<FormState>();
  static const textDeco = OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blue),
    borderRadius: BorderRadius.all(
      Radius.circular(25),
    ),
  );
  String _email;

  Widget _buildEmail() {
    return TextFormField(
      decoration: InputDecoration(
        // labelText: 'Email',
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.all(
            Radius.circular(25),
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blue),
          borderRadius: BorderRadius.all(
            Radius.circular(25),
          ),
        ),
        prefixIcon: Icon(Icons.enhanced_encryption),
        hintText: "Email",
        filled: true,
        fillColor: Colors.grey[200],
      ),
      validator: (String value) {
        if (value.isEmpty) {
          return "Username is required";
        } else if (value.length <= 5) {
          return "Username should be greater than 5";
        } else {
          return null;
        }
      },
      onSaved: (String value) {
        _email = value;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Form(
          key: _key,
          child: Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              children: <Widget>[
                _buildEmail(),

                FlatButton(
                  child: Text("Submit"),
                  onPressed: () {
                    //
                    if (_key.currentState.validate()) {
                      print("sunmitted");
                    }
                  },
                ),
              ],
            ),
          ),
        )
      ],
    ));
  }
}

我的输出看起来像这样：

Normal interface

错误消息输出如下：Error interface

Answer 1

您需要将errorBorder和focusedErrorBorder设置为TextFormField。

errorBorder: OutlineInputBorder(
   borderSide: BorderSide(color: Colors.red),
   borderRadius: BorderRadius.circular(25.0),
),
focusedErrorBorder: OutlineInputBorder(
   borderSide: BorderSide(color: Colors.red),
   borderRadius: BorderRadius.circular(25.0),
),

我想在Flutter中验证我的textFormField而不更改装饰

1 个答案: