How to change textField underline color?

    decoration: new InputDecoration(
              labelText: "Email",
              suffixIcon: Icon(Icons.email),
              labelStyle: TextStyle(color: Colors.red),
              enabledBorder: new UnderlineInputBorder(
                  borderSide: new BorderSide(color: Colors.red)
              )
        )

Just used -:

decoration: InputDecoration(        
              enabledBorder: UnderlineInputBorder(      
                      borderSide: BorderSide(color: Colors.cyan),   
                      ),  
              focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.cyan),
                   ),  
             ),

it works for me :)


** See update below or see the answer by @GJJ2019 **

The logical answer would be to use an InputBorder, particularly an UnderlineInputDecorator, and pass it in to the inputdecorator as the border. However, all this does is tell the InputDecorator whether is should use an underline or whatever else you specify.

The actual color is based on the theme - from the source:

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

So to change the colour do something like this (or specify the theme for your entire application):

new Theme(
  data: new ThemeData(
    primaryColor: Colors.red,
    accentColor: Colors.orange,
    hintColor: Colors.green
  ),
  child: new TextField(
    decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(color: const Color(0xFF424242)),
      border: new UnderlineInputBorder(
        borderSide: new BorderSide(
          color: Colors.red
        )
      )
    ),
  ),
),

UPDATE:

This is now possible to do in the way you'd expect it to work.

decoration: InputDecoration(        
  enabledBorder: UnderlineInputBorder(      
    borderSide: BorderSide(color: theColor),   
  ),  
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
  border: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
)

To change the color for the entire app, use ThemeData's inputDecorationTheme property.

  • To use the color only when the input is in focus (i.e. clicked & ready to type):

    MaterialApp(
      ...
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red)
          ),
        )
      )
    )
    
  • To always use the color (even when not in focus), set enabledBorder and border as well:

    MaterialApp(
      ...
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red)
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.red),
          ),
        )
      )
    )
    

Tags:

Dart

Flutter