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

Question

I have a textfield in flutter with border decoration. the text field also have a validator property.My problem is that when i click on submit and the validation error message is shown the text field border goes off.I really don't know any work around about this.

be low is my code:

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");
                    }
                  },
                ),
              ],
            ),
          ),
        )
      ],
    ));
  }
}

and my output looks like this:

Normal interface

the error message output looks like this: Error interface

Answer 1

You need to set errorBorder and focusedErrorBorder to your 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),
),