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

Nellnella

are you hot reloading? if so stop the app and run it again – Colver

I am doing cold boot again and again, but no success – Nellnella

let's see if this helps: TextField(..., style: TextStyle(decoration: TextDecoration.none)) – Nebula

The underline on the text is probably your autocorrect, remove focus from the field and check if the underline is present – Colver

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 – Nellnella

@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 : github.com/flutter/flutter/issues/22828#issuecomment-428093243 – Colver

Possible duplicate of How to disable predictive text in TextField of Flutter? – Langan

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;

Chantalchantalle

Answer 2

You should use TextDecoration.none in decoration property.

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

Betaine

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.

Whorish

Answer 4

style:TextStyle( decorationThickness: 0)

Higbee

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. – Manhole

Answer 5

just code ...

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

Eyecup

Answer 6

Then input text is always underlined while typing use:

autocorrect: false,
enableSuggestions: false,

https://mcmap.net/q/393000/-disable-word-underlining-in-textformfield

Asbestos

Answer 7

As stated in https://mcmap.net/q/393000/-disable-word-underlining-in-textformfield

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

Mcnutt

Answer 8

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

Topside

Answer 9

//just make thickness=0

style: const TextStyle(
          decorationThickness: 0,
          color: Colors.black,
          fontWeight: FontWeight.w500,
        ),

Brownnose

Answer 10

"decoration:TextDecoration.none" doesn't work unless you set decorationThickness to zero.

 style: TextStyle(
  decoration: TextDecoration.none,
  decorationThickness: 0,
),

Presidency

Answer 11

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

Athal

Answer 12

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

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

Jeanettajeanette