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

Answer 1

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;

Answer 2

You should use TextDecoration.none in decoration property.

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

Answer 3

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.

Answer 4

just code ...

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

Answer 5

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.

Answer 6

Then input text is always underlined while typing use:

autocorrect: false,
enableSuggestions: false,

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

Answer 7

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

Answer 8

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

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

Answer 9

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