I have a TextFormField with a labelText. I would like the labelText to be orange, unless when the form validation fails, then the text should be standard error red.

enter image description here

But if I put a TextStyle in the decoration options, and setting the color to orange, this text style overrides the standard validation color:

TextFormField(
   decoration: InputDecoration(
       labelText: 'I want to be orange',
       labelStyle: TextStyle(color: Colors.orange),
   ),
   validator: (value) {
       if (value == null || value.isEmpty || value != 'test') {
           return 'Validation error';
       }
       return null;
     },
   ),

enter image description here

I can´t seem to find any properties on the TextFormField that supports this case. I also searched for a solution where I could set the TextStyle based on the status of the validation, but it seems like it is not possible to access the validation state inside the TextFormField.

One would think this is a pretty common case. What am I missing here? 🤔


Solution 1: Ozan Taskiran

You could save the labelColor inside a variable

  Color labelColor = Colors.orange;

Inside your validate you can set the color to red

validator: (value) {
       if (value == null || value.isEmpty || value != 'test') {
           setState(() {
            labelColor = Colors.red;
           });
           return 'Validation error';
       }
       return null;
     },

Set the color as the labelColor

labelStyle: TextStyle(color: labelColor),