Change TextField's Underline in Flutter

Tiziano Gioè picture Tiziano Gioè · Feb 9, 2018 · Viewed 27.1k times · Source

I'm working on an application using Flutter SDK. When I use a TextField widget, and I focus it, the underline becomes blue. I need to change this color to red, how can I do it?

Screenshot of what I need to change. I want just the underline to change, , not the label color.

Screenshot of what I need to change. (I want the underline to change, not the label color)

Answer

Rémi Rousselet picture Rémi Rousselet · Feb 9, 2018

While these other answers may somehow work, you should definitely not use it. That's not the proper way to get a custom theme in Flutter.

A much more elegant solution is as followed :

final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.red),
  child: new TextField(
    decoration: new InputDecoration(
      labelText: "Hello",
      labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
    ),
  ),
);

At the same time, if you just want to show an error (Red), use errorText of InputDecoration instead. It will automatically set the color to red.