How to change textField underline color?

Question

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

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.

You can find same exact question here: [https://stackoverflow.com/questions/48706884/change-textfields-underline-in-flutter] and here [https://stackoverflow.com/questions/26574328/changing-edittext-bottom-line-color-with-appcompat-v7] — Blasanka, Apr 01 '18 at 16:44
Possible duplicate of [Change TextField's Underline in Flutter](https://stackoverflow.com/questions/48706884/change-textfields-underline-in-flutter) — Blasanka, Apr 01 '18 at 16:45
I've already checked the first link. If you check that one then at there also this problem not completely solve. In the second link, that belongs to Android development by JAVA not flutter(DART). So basically, can't help me. — Suresh, Apr 01 '18 at 16:46

GJJ2019 · Answer 1 · 2019-07-19T17:02:11.457

224

Just used -:

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

it works for me :)

edited Jul 19 '19 at 17:02

answered Oct 06 '18 at 05:45

GJJ2019

4,624
3
12
22

1

I Think U Should Also Try Material App Theme Settings. They Might Be Very Useful For Entire Color System. – GJJ2019 Dec 29 '18 at 16:37
1

@GJJ can ou give me any source to find a solution for that. – Sanal S Jul 12 '19 at 08:22
how can I apply `enabledBorder` on `InputDecoration.collapsed` – Sanal S Oct 04 '19 at 04:59

rmtmckenzie · Accepted Answer · 2020-05-12T08:16:38.820

139

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

edited May 12 '20 at 08:16

answered Apr 01 '18 at 16:47

rmtmckenzie

37,718
9
112
99

4

I tried that ```UnderlineInputDecorator``` but couldn't able make any solution for my problem. – Suresh Apr 01 '18 at 16:48
Ah okay. When I get a chance I'll take a look and add a code example if noone else gets to it before me. – rmtmckenzie Apr 01 '18 at 16:51
No Problem. Let me see what else I can do. – Suresh Apr 01 '18 at 17:00
There, changed it to fix it. But as I mentioned briefly, you're probably better off specifying the theme for your entire application and then using that wherever you need to - that way you can change the entire theme if you want to =) – rmtmckenzie Apr 01 '18 at 18:03
1

Oh man, I've got one answer from Gitter about wrapping everything inside a Theme & it worked now. Don't know all these in such great details. But, gradually learning. Thanks for your help. – Suresh Apr 01 '18 at 18:11
So what purpose does `BorderSide` `color` serve? – lordvcs Jul 16 '19 at 06:53
This may have actually been fixed, see https://github.com/flutter/flutter/pull/19694. – rmtmckenzie Jul 16 '19 at 18:30

Config · Answer 3 · 2020-08-04T18:40:58.033

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

your answer should be the best answer. Thank you – Russo May 01 '20 at 15:12 — Russo, May 01 '20 at 15:12

score 20 · Answer 4 · edited Feb 29 '20 at 13:56

20

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

edited Feb 29 '20 at 13:56

maxadorable

1,290
1
10
24

answered Jan 07 '19 at 01:14

Victor Santos

509
4
5

score 10 · Answer 5 · answered Mar 04 '22 at 12:26

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

) )

score 4 · Answer 6 · answered Jun 24 '19 at 14:08

4

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

answered Jun 24 '19 at 14:08

Javier González

1,999
17
18

How do you do one border only (top, or left, or right or bottom) – user3808307 Jan 24 '21 at 23:09

score 0 · Answer 7 · answered Jun 16 '21 at 14:39

0

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

answered Jun 16 '21 at 14:39

abdelrahman abied

159
4

score 0 · Answer 8 · answered Sep 10 '21 at 06:01

@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))));
  }

How to change textField underline color?

8 Answers8

Linked

Related