Change TextField's Underline in Flutter

Question

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.

Answer 1

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.

Answer 2

You can also change its color by following ways.

1. Wrap your TextField in Theme and provide accentColor

   Theme(   data: Theme.of(context).copyWith(accentColor: Colors.red),   child: TextField(), ) 

2. Using inputDecoration property.

   TextField(   decoration: InputDecoration(     focusedBorder: UnderlineInputBorder(       borderSide: BorderSide(color: Colors.red),     ),   ), )