flutter how remove text underline on text selection (TextFormField)?-CodePudding

It is necessary to move the cursor to the end of the text, but in flutter this is strangely implemented through text selection, I do it like this

 textController.selection =
                TextSelection.collapsed(offset: textController.text.length);

it works, but when typing, it appears underlined

It is possible to somehow remove the underlining of the text, I read the documentation, but did not find it.

My TextFormField

          TextFormField(
 
                        cursorColor: Colors.white,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),
                        controller: textController,
                        autofocus: false,
                        decoration: const InputDecoration(
                          enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white)),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.white)),
                          filled: true,
                          isDense: true,
                          hintText:
                              'search',
                          hintStyle: TextStyle(
                            //Style of hintText
                            color: Colors.white60,
                            fontSize: 20,
                          ),
                        ),
                        
                      ),

CodePudding user response：

In Flutter, you can remove the text underline on text selection of a TextFormField by setting the decoration property to a InputDecoration object with the enabledBorder and focusedBorder properties set to a UnderlineInputBorder object with the borderSide property set to BorderSide.none.

Here's an example:

TextFormField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide.none,
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide.none,
    ),
  ),
),

This sets the enabledBorder and focusedBorder properties to UnderlineInputBorder objects with no border, effectively removing the underline.

You can also use InputDecoration.collapsed instead of UnderlineInputBorder(borderSide: BorderSide.none) to remove the underline.

TextFormField(
  decoration: InputDecoration(
    enabledBorder: InputDecoration.collapsed(hintText: ""),
    focusedBorder: InputDecoration.collapsed(hintText: ""),
  ),
),

This will give the same effect but this time you can also provide hintText.

Both ways will remove the underline from the TextFormField when the text is selected.

You can also use TextEditingController.moveCursor method to move the cursor to the end of text.

textController.moveCursor(TextSelection.collapsed(offset: textController.text.length));

This will move the cursor to the end of the text, and it will be visible to the user, allowing them to start typing or editing immediately. Please keep in mind that, you should call these methods after the text is set inside the TextFormField otherwise it won't move the cursor to the end of the text.

In your code snippet, you have used UnderlineInputBorder for enabledBorder and focusedBorder properties of InputDecoration and set the color of borderSide to white.

To remove the underline, you can use InputDecoration.collapsed instead of UnderlineInputBorder and set the hintText and hintStyle properties as you desire.

TextFormField(
    cursorColor: Colors.white,
    style: const TextStyle(
        color: Colors.white,
        fontSize: 20,
    ),
    controller: textController,
    autofocus: false,
    decoration: const InputDecoration(
        enabledBorder: InputDecoration.collapsed(hintText: "search"),
        focusedBorder: InputDecoration.collapsed(hintText: "search"),
        filled: true,
        isDense: true,
        hintStyle: TextStyle(
            //Style of hintText
            color: Colors.white60,
            fontSize: 20,
        ),
    ),
),

This will remove the underline from the TextFormField and show the hint text "search" in the text field.

You can also use border: InputBorder.none instead of InputDecoration.collapsed to remove the underline.

TextFormField(
    cursorColor: Colors.white,
    style: const TextStyle(
        color: Colors.white,
        fontSize: 20,
    ),
    controller: textController,
    autofocus: false,
    decoration: const InputDecoration(
        enabledBorder: InputBorder.none,
        focusedBorder: InputBorder.none,
        hintText: "search",
        hintStyle: TextStyle(
            //Style of hintText
            color: Colors.white60,
            fontSize: 20,
        ),
    ),
),

Both ways will remove the underline from the TextFormField.

CodePudding user response：

this might help you

                    TextField(
                             style: const TextStyle(
                             decoration: TextDecoration.none),
                             ),