Flutter : TextFormField Loses Decoration after Validation - flutter

Question

I'm using a TextFormField with InputDecorations for Borders and a button to submit text. However, if a field is left empty and the button is pressed, the validation takes place as normal, but the button loses its border and the hint text doesn't go away (input text is overlayed on it).
Formfield:
Center(
child: Container(
padding: EdgeInsets.only(top: ScreenHeight * 0.02),
width: ScreenWidth * 0.9,
height: ScreenHeight * 0.12,
child: TextFormField(
style: TextStyle(
fontSize: ScreenHeight * 0.025,
color: Colors.teal),
decoration: InputDecoration(
labelText: "Speciality",
labelStyle: TextStyle(
color: Colors.cyan,
fontSize: ScreenHeight * 0.025),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(
color: Colors.tealAccent,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(
color: Colors.cyan,
width: 2.0,
),
),
),
validator: (String? value) {
if (value == null || value.isEmpty) {
return 'Please enter a speciality';
}
return null;
},
onChanged: (value) {
(_speciality = value);
},
),
),
),
Button:
Center(
child: Container(
padding: EdgeInsets.only(
top: ScreenHeight * 0.005,
),
height: ScreenHeight * 0.06,
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Process data.
}
},
child: const Text('Submit'),
),
),
),
I'm debugging the code on an emulator. Any help on why this happens and how to fix it would be appreciated.

Answer 1

You should provide the errorBorder and border properties to your TextFormField widget.
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(
color: Colors.cyan,
width: 2.0,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(
color: Colors.cyan,
width: 2.0,
),
),