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.
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?
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()
);
}