How to remove underline of input text in the TextFormField?

Question

I want to remove the black underline that you see under the text. It come whenever I input any character and addon with every character. How can I achieve this? Here is my TextFieldForm code:

TextFormField(
          controller: _controller,
          showCursor: false,
          toolbarOptions: ToolbarOptions(
            cut: true,
            copy: false,
            selectAll: true,
            paste: true,
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.white,
            hintStyle: TextStyle(fontSize: 20),
            hintText: "Search the word",
            contentPadding: EdgeInsets.only(left: 20),
            enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
            suffixIcon:
                Icon(Icons.search, color: Colors.black.withOpacity(0.6)),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
          ),
        ),

I tried "border: InputBorder.none" but fail....

Does this answer your question? [How to remove underline below TextField?](https://stackoverflow.com/questions/56315495/how-to-remove-underline-below-textfield) — Jesse Lawson, May 06 '20 at 16:16

score 1 · Answer 1 · answered Sep 09 '22 at 05:14

1

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

answered Sep 09 '22 at 05:14

John vinith

114
5

Taba · Answer 2 · 2020-05-07T18:42:09.193

I guess that's for the OS of your device. It's an auto completion option. As you can see it removes the underline when you press Space (means the word has ended). You have disable it in the phone settings and have nothing to do with your code. To do so try following:

Open the Settings menu on your phone or tablet and select Languages & Input.
Tap Virtual keyboard under Keyboard and input methods.
Select Android Keyboard.

Turn off the auto correction and show correction suggestions and also next word suggestion.

Avijit Goswami · Answer 3 · 2021-04-28T13:55:27.397

You can overrider the inputFormatters in the TextField Widget and place the custom formatter class in the array like the below snippets.

My Custom Formatter class:

    class CaseFormatting extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    return TextEditingValue(
      text: newValue.text,
      selection: newValue.selection
    );
  }
}

And in the TextField add the class in the inputFormatters.

    TextField(
  //...
                inputFormatters: [
                  CaseFormatting(),
                  // FilteringTextInputFormatter.allow(RegExp(r"[A-Z0-9]+")),
                ],
  //...
              )

score -1 · Answer 4 · edited May 07 '20 at 18:03

-1

I think you have to add focusBorder under the decoration like this:

 decoration: InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                ),

edited May 07 '20 at 18:03

Adrian Mole

49,934
160
51
83

answered May 07 '20 at 13:53

Neeraj Sharma

21
4

They question is not for removing the border line that appears under the text field, but rather the automatic underline style of the text that is being entered. – spekary Dec 19 '20 at 17:14
please read the question before posting an answere – Sambhav jain Aug 17 '21 at 07:54

score -2 · Answer 5 · edited May 08 '20 at 00:34

-2

Use this function:

focusedBorder: InputBorder.none,

edited May 08 '20 at 00:34

konstantin_doncov

2,725
4
40
100

answered May 07 '20 at 09:03

Neeraj Sharma

21
4

sorry for that i haven't seen that – Neeraj Sharma May 07 '20 at 13:46

How to remove underline of input text in the TextFormField?

5 Answers5