(Flutter) TextFormField Change labelColor on Focus

### Update

As mentioned by [Guilherme][1] in the comment, the later version of Flutter uses different logic to get the color

```dart
Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
return themeData.colorScheme.primary;
}
return themeData.hintColor;
}
```

[Source][2]

You will now need to set it from the `colorScheme` instead

```dart
ThemeData.dark().copyWith(
colorScheme: ColorScheme.dark(
primary: activeColor,
),
)
```

---

### Original answer

After digging the source code for the `InputDecorator` used to determine the label color, here's what I found.

```dart
TextStyle _getFloatingLabelStyle(ThemeData themeData) {
final Color color = decoration.errorText != null
? decoration.errorStyle?.color ?? themeData.errorColor
: _getActiveColor(themeData);
final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
return style
.copyWith(color: decoration.enabled ? color : themeData.disabledColor)
.merge(decoration.labelStyle);
}

Color _getActiveColor(ThemeData themeData) {
if (isFocused) {
switch (themeData.brightness) {
case Brightness.dark:
return themeData.accentColor;
case Brightness.light:
return themeData.primaryColor;
}
}
return themeData.hintColor;
}
```

In short, to change the label color, set the `primaryColor` light theme or `accentColor` for dark theme.

Another tip: To change the label color while it's not focused, set `hintColor`.

```dart
ThemeData.dark().copyWith(
primaryColor: Colors.red,
accentColor: Colors.white,
hintColor: Colors.pink,
)
```


[1]:

[To see links please register here]

[2]:

[To see links please register here]

# The Summary

You might want to check out [Flutter Cookbook's Focus and text fields](

[To see links please register here]

) recipe.

Essentially, we have to:

1. Create a `FocusNode` property.
1. Add initialization and disposal to it.
1. Add it to the `TextFormField`.
1. Add a focus request on every tap on the `TextFormField`.

## 1. Create a `FocusNode` property

```dart
class CustomTextFormFieldState extends State<CustomTextFormField> {
FocusNode _focusNode;
...
```

## 2. Add initialization and disposal to it

```dart
@override
void initState() {
super.initState();
_focusNode = FocusNode();
}

@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
```

## 3. Add it to the `TextFormField`

```dart
@override
Widget build(BuildContext context) {
return TextFormField(
focusNode: _focusNode,
...
```

## 4. Add a focus request on every tap on the `TextFormField`

**Don't forget to use `setState`**:

```dart
void _requestFocus(){
setState(() {
FocusScope.of(context).requestFocus(_focusNode);
});
}
```

Add the method to the `TextFormField`'s `onTap` property:

```dart
@override
Widget build(BuildContext context) {
return TextFormField(
focusNode: _focusNode,
onTap: _requestFocus,
...
```

There is a floatingLabelStyle parameter in the InputDecoration, you can use it like this:
```
decoration: InputDecoration(
labelText: "label",
hintText: "hint",
labelStyle: GoogleFonts.roboto(
color: color.labelColor,
),
floatingLabelStyle: GoogleFonts.roboto(
color: color.defaultGreen,
),),
```

[To see links please register here]

```
labelStyle: MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
final Color color = states.contains(MaterialState.focused)
? Colors.pink
: Colors.orange;
return TextStyle(color: color);
}),
```

One more clean way to do it with styles (you can add styles to the main theme and use for dark \ light modes)

TextFormField(
decoration: InputDecoration(
labelText: "some label",
labelStyle: const TextStyle(color: Colors.grey),
floatingLabelStyle: const TextStyle(color: Colors.blueAccent),
),),

[![enter image description here][1]][1]


[1]:

for active/click

floatingLabelStyle: TextStyle(color: Colors.yellow),
for inactive

labelStyle: TextStyle(color: Colors.black),

below is complete example

TextField(
decoration: InputDecoration(
hintText: 'Verify Password',
focusColor: appColor,
labelText: "Verify Password",
labelStyle: TextStyle(color: Colors.black),
floatingLabelStyle: TextStyle(color: appColor),
floatingLabelBehavior: FloatingLabelBehavior.always
),
cursorColor: appColor,
)

Use themes, this would only have to be done once in a central place:

inputDecorationTheme: InputDecorationTheme(
floatingLabelStyle: TextStyle(color: Colors.blue),
),

The Material 3 way using *ColorScheme* for text color and *InputDecorationTheme* for border color:

```Dart
var focusColor = Colors.blue;
var nonFocusColor = Colors.grey;

MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
primary: focusColor,
onSurfaceVariant: nonFocusColor,
// other required props ...
),
inputDecorationTheme: const InputDecorationTheme(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: focusColor),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: nonFocusColor),
),
),
useMaterial3: true,
),
);
```