Flutter: How to hide TextField text pointer (cursor) when use initial value text (Android)

Question

Use case: Messaging app you edit your message: keyboard, blinking cursor and initial text appears but pointer (cursor) is not

But on Flutter when you use initial text (or via textController) there are always pointer(cursor) which is not wanted

Example

Steps to reproduce: run flutter create bug

edit main.dart to replace center text (line 100) to MyStatefulPage(),

class MyStatefulPage extends StatefulWidget {
  @override
  State<MyStatefulPage> createState() {
    return _MyStatefulPageState();
  }
}
class _MyStatefulPageState extends State<MyStatefulPage> {

  TextEditingController controller;

  @override
  void initState() {
    super.initState();
    controller = new TextEditingController();
    controller.text = 'My Initial Text';
  } 

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
       border: InputBorder.none
      ),
      // showCursor: false,
      controller: controller,
      autofocus: true,
      maxLines: 8,
    );
  }
}

With that code when you open app keyboard will appear but so will pointer(cursor) I want to hide this cursor(pointer).

Note: it's only for Android.

Baziotes

Hi, @philip did you resolve your issue? – Grape

Hi @DMDev No, this question was created almost 2 years ago. Maybe some of the answers are correct but I haven't tested them if you will find a solution please post it here as well, Thanks! – Baziotes

Answer 1

TextField set enableInteractiveSelection property to false can resolve this issue

Reaves

Still, the pointer is visible below the cursor – Depravity

Answer 2

To hide the blinking cursor

Add this line of code

showCursor: false

To hide the editing pointer

Add this line of code

enableInteractiveSelection: false

Bedrail

Answer 3

in textformfield use showCursor: false

Grog

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

Answer 4

TextFormField cursorHeight: 0 and cursorWidth: 0 can hide the cursor.

Borage

Answer 5

TextFormField(enableInteractiveSelection: false)

Heartburning

Answer 6

readOnly: true, hide the cursor

Grenadine

Answer 7

You may need to disable TextField. See the example below to disable TextField input in Flutter.

 TextField(
              decoration: InputDecoration(
                  labelText: "Your Name (Disabled)",
                  enabled: false //disabel this text field input
              )
          ),

Predate

Answer 8

Remove the cursor and follow this solution all are working.

1. showCursor: false
2. cursorColor: Colors.transparent
3. cursorWidth: 0
4. cursorHeight: 0

Rubbing

Answer 9

If you want to hide the cursor in a TextField when it has an initial value, there are several approaches you can take. Below are some solutions, including customizing cursor appearance globally via ThemeData.

1.Setting showCursor to false The most direct approach is to set the showCursor property of the TextField to false. This will completely hide the cursor.

TextField(
  controller: TextEditingController(text: 'Initial Text'),
  showCursor: false,
  // ... other properties
)

2. Customizing Cursor Appearance If you want to maintain the cursor but modify its appearance, you can use the cursorColor, cursorWidth, and cursorHeight properties. Setting cursorWidth and cursorHeight to 0 will effectively hide the cursor.

TextField(
  controller: TextEditingController(text: 'Initial Text'),
  cursorColor: Colors.transparent,
  cursorWidth: 0,
  cursorHeight: 0,
  // ... other properties
)

3. Using readOnly and onTap For a more interactive approach, you can set readOnly to true to prevent text editing and then handle the onTap event to allow editing when needed.

bool _isEditable = false;

TextField(
  controller: TextEditingController(text: 'Initial Text'),
  readOnly: !_isEditable,
  onTap: () {
    setState(() {
      _isEditable = true;
    });
  },
  // ... other properties
)

---

Customizing Cursor Appearance Globally

You can customize the cursor appearance globally using ThemeData.textSelectionTheme. This will affect all TextField widgets in your app.

MaterialApp(
  theme: ThemeData(
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.YourColor,
      selectionColor: Colors.YourColor,
      selectionHandleColor: Colors.YourColor,
    ),
  ),
  // ... other properties
)

---

Example with ThemeData and showCursor Combining these techniques, you can achieve the desired cursor behavior for your TextField.

MaterialApp(
  theme: ThemeData(
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.YourColor,
      selectionColor: Colors.YourColor,
      selectionHandleColor: Colors.YourColor,
    ),
  ),
  home: Scaffold(
    body: Center(
      child: TextField(
        controller: TextEditingController(text: 'Initial Text'),
        showCursor: false,
        // or customize cursor appearance:
        // cursorColor: Colors.transparent,
        // cursorWidth: 0,
        // cursorHeight: 0,
      ),
    ),
  ),
)

---

Choosing the Right Approach

• Preventing cursor display completely: Use showCursor: false.
• Customizing cursor appearance: Use cursorColor, cursorWidth, and cursorHeight.
• Allowing editing on tap: Use readOnly and onTap.

By combining these techniques, you can achieve the desired cursor behavior for your TextField.

Firebug