CODEWITHSUNDEEP
dartflutter
Suresh
Suresh

Reputation: 5987

How to change textField underline color?

I'm new to both flutter & dart. Currently, using this in one of my personal projects.

enter image description here

In all of my form, the underline of textField is showing in blue color. I want to change that to some other color. The piece of code which I'm using is like...

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

Can't able to understand how to achieve this.

Note: I know there is a similar question at here Change TextField's Underline in Flutter. But, at there also it has not completely solved. Also, one more link which looks similar to mine at here Changing EditText bottom line color with appcompat v7 but, that actually belong to Android development by using JAVA not DART(flutter) which I'm using for my android app development. So, please don't get confused about those links.

Upvotes: 154

Views: 195832

Answers (9)

MBR
MBR

Reputation: 1

There is a style property in TextField. The style to use for the text being edited.

return TextField(
  decoration: InputDecoration(),
  style: const TextStyle(color: Colors.white),
);

Upvotes: 0

Shirsh Shukla
Shirsh Shukla

Reputation: 5973

By using InputDecoration, you can set underline color as per your requirement.

TextField(
            decoration: InputDecoration(
              hintText: "Enter your email",
              // [enabledBorder], displayed when [TextField, InputDecoration.enabled] is true
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.lightBlueAccent),
              ),
              //[focusedBorder], displayed when [TextField, InputDecorator.isFocused] is true
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.redAccent),
              ),

) )

Upvotes: 16

Roshan lamichhane
Roshan lamichhane

Reputation: 91

@override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
        primaryColor: Colors.transparent,
        appBarTheme: AppBarTheme(elevation: 0),
        inputDecorationTheme: InputDecorationTheme(
            border: UnderlineInputBorder(
                borderSide: BorderSide(style: BorderStyle.none, width: 0))));
  }

Upvotes: 0

abdelrahman abied
abdelrahman abied

Reputation: 297

with focusedBorder property in TextField can change underline color like : focusedBorder: new UnderlineInputBorder( borderSide: new BorderSide(color: Colors.black), ),

Upvotes: 0

Config
Config

Reputation: 1692

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),
      ),
    )
  )
)

Upvotes: 38

rmtmckenzie
rmtmckenzie

Reputation: 40413

** 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),
  ),
)

Upvotes: 144

Victor Santos
Victor Santos

Reputation: 539

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

Upvotes: 20

GJJ2019
GJJ2019

Reputation: 5172

Just used -: 

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

it works for me :)

Upvotes: 241

Javier González
Javier González

Reputation: 2095

need change three border.

  enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: _type.color),
          ),
  focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: _type.color),
  ),
  border:
    OutlineInputBorder(borderSide: BorderSide(color: _type.color)),

Upvotes: 4

Related Questions