Search code examples
androidflutterdartcursortextfield

Flutter: how to hide Cursor's "belly" on textfield


Whenever the user clicks on textfield in order to change it, the cursor appears and so it's so-called "belly" (I don't what's it called actually, see picture below - red arrow). I want to enable interactive selection (i.e. enabling to move the cursor alongside the text field), and to show the blinking cursor on edit, but I want that so-called cursor's to not appear.

enter image description here

here is my code:

TextField(
    enableInteractiveSelection: true,
    showCursor: true,
    autofocus: false,
    decoration: InputDecoration(
        isDense: true,
        enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey),
            borderRadius: BorderRadius.all(Radius.circular(30))
        ),
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey),
            borderRadius: BorderRadius.all(Radius.circular(30))
        ),
    ),
    onChanged: (text) => {},
    textAlign: TextAlign.center,
    controller: _firstNameChanged
       ? (_firstNameController..text = _newFirstName)
       : (_firstNameController..text = userRep.firstName),
    inputFormatters: [
       FilteringTextInputFormatter.allow(RegExp('[a-zA-Z]'))
    ],
    focusNode: _firstNameInputFocusNode,
    onSubmitted: (text) {
       if(text.isNotEmpty) {
          setState(() {
            _newFirstName = text;
            _firstNameChanged = true;
          });
       }
    },
    style: GoogleFonts.lato(
       fontSize: 16.0,
       color: Colors.black,
    )
)

Any ideas, please?


Solution

  • Thanks to @Dude comment, I was finally able to solve this according to this answer.

    full code:

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          textSelectionHandleColor: Colors.transparent, /// <- Added
          cursorColor: Colors.lightGreen[800],
          primaryColor: Colors.green,
          accentColor: Colors.lightGreen[800],
          fontFamily: 'NewRomanTimes',
          textTheme: TextTheme(
            headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
            headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          )
        ),
        home: MyHomePage()
      );
    }