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

Answer 1

Use this function:

focusedBorder: InputBorder.none,

Answer 2

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:

1. Open the Settings menu on your phone or tablet and select Languages & Input.

2. Tap Virtual keyboard under Keyboard and input methods.

3. Select Android Keyboard.

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

Answer 3

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]+")),
                ],
  //...
              )

Answer 4

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

Answer 5

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

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