Search code examples
flutterdarttextfieldunderline

Change TextField's Underline in Flutter


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)


Solution

  • 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.