How to remove underline below TextField?

Question

Here is the code. I want to remove the black underline just below text, and currently the TextField is in edit mode:

TextField(
      autofocus: true,
      decoration: InputDecoration.collapsed(
        hintText: "Search",
        border: InputBorder.none,
      ),
      maxLines: 1,
    )

let's see if this helps: `TextField(..., style: TextStyle(decoration: TextDecoration.none))` — George Zvonov, May 26 '19 at 16:56
The underline on the text is probably your autocorrect, remove focus from the field and check if the underline is present — Dev Man, May 26 '19 at 16:57
No success George and Immortal Dude if I remove the focus (by tapping back button)then the **underline is gone**, but I **don't want** the underling even when I am *typing* — Rahul Lohra, May 26 '19 at 17:00
@RahulLohra that is not something that is in your control, it is something your keyboard does (a feature of sorts). The reason why i asked you to remove the focus i.e. tap outside the field after you've typed something is to confirm this fact. Its is not an issue with the text field but the spell checker of your keyboard letting you know that the word you've typed is correct if you type something wrong like "wasdsasd" the black line will turn into a red underline. Instead disable auto correct , see : https://github.com/flutter/flutter/issues/22828#issuecomment-428093243 — Dev Man, May 26 '19 at 17:16
Possible duplicate of [How to disable predictive text in TextField of Flutter?](https://stackoverflow.com/questions/55157290/how-to-disable-predictive-text-in-textfield-of-flutter) — Mazin Ibrahim, May 26 '19 at 17:37

score 25 · Answer 1 · answered Jan 28 '20 at 19:47

Try to give a TextStyle to your TextField widget. Your TextField is getting your default Theme's TextStyle.

TextField(
      autofocus: true,
      style: TextStyle(color: Colors.white, fontSize: 30),
      decoration: InputDecoration.collapsed(
        hintText: "Search",
        border: InputBorder.none,
      ),
      maxLines: 1,
    )

In TextField widgets source code it states:

  /// If null, defaults to the `subhead` text style from the current [Theme].
  final TextStyle style;

score 15 · Answer 2 · edited May 13 '20 at 05:51

15

You should use TextDecoration.none in decoration property.

Text(
  'your txt',
  style: TextStyle( decoration: TextDecoration.none),
)

edited May 13 '20 at 05:51

Christopher Moore

15,626
10
42
52

answered May 12 '20 at 20:38

Hossein Azem

331
3
8

score 8 · Answer 3 · answered Feb 18 '21 at 20:29

I suspect it's something to do with the predictive text. The underlines disappear when you press the space bar to end the word you're typing; they then start appearing again when you start typing the next word. As suggested here, try setting TextInputType.visiblePassword; - this worked for me.

score 5 · Answer 4 · answered Jul 25 '21 at 10:44

just code ...

TextFormField(
  decoration: InputDecoration(
                 hintText: 'comment..',
                 focusedBorder: InputBorder.none,
                 enabledBorder: InputBorder.none,
                 contentPadding: EdgeInsetsDirectional.only(start: 10.0),
                  ),
              )

score 4 · Answer 5 · answered Dec 27 '22 at 12:18

4

style:TextStyle( decorationThickness: 0)

answered Dec 27 '22 at 12:18

alexandr botar

41
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 28 '22 at 14:52

score 0 · Answer 6 · answered Aug 30 '20 at 08:06

0

As stated in https://stackoverflow.com/a/57499189/445887

This is an accessibility feature (if you still see an underline after disabling it in TextStyle) from the Android keyboard.

answered Aug 30 '20 at 08:06

Tom Roggero

5,777
1
32
39

score 0 · Answer 7 · answered Nov 11 '21 at 00:10

0

Then input text is always underlined while typing use:

autocorrect: false,
enableSuggestions: false,

https://stackoverflow.com/a/69921656/10932271

answered Nov 11 '21 at 00:10

Rostyslav N

68
5

score 0 · Answer 8 · answered Apr 25 '22 at 03:23

Provide the following code inside the TextField widget and change the color according to the background color of a TextField. If the background is white provide white color which will make the underline invisible.



style: TextStyle(
              fontSize: 16,
              letterSpacing: 1,
              decoration: TextDecoration.none,
              decorationStyle: TextDecorationStyle.dotted,
              decorationColor: Colors.white),

score -1 · Answer 9 · answered Apr 15 '20 at 22:25

-1

You have to add a "decoration:TextDecoration.none", like this:

  Text(
    "Don't forget",
    style: TextStyle(
       decoration: TextDecoration.none
    )
  )

answered Apr 15 '20 at 22:25

Sebastian Corradi

1,353
2
14
25

score -2 · Answer 10 · edited Mar 30 '20 at 13:39

-2

@Immortal Dude is right that this is not the problem of textfield. Because when you click somewhere else after typing in the textfield, the underline automatically remove from the text.

You just need to set the keyboard type:

keyboardType: TextInputType.visiblePassword,

edited Mar 30 '20 at 13:39

סטנלי גרונן

2,917
23
46
68

answered Mar 30 '20 at 11:47

Ali Murtaza

414
4
9

How to remove underline below TextField?

10 Answers10

Linked