Flutter TextField cursor is not vertically center when there is nothing input

user_8244229 0
Viewed 104

I set the cursorHeight property of flutter's TextField, but when there is no content in the TextField, the cursor cannot be vertically centered with the hintText, as shown in the following figure:

enter image description here

However, when there is content in the TextField, the content text and the cursor will be vertically centered, as shown in the following figure:

enter image description here

This is my code:

TextField(
  decoration: const InputDecoration(
    hintText: "Type here to add a quick TODO...",
    enabledBorder: InputBorder.none,
    focusedBorder: InputBorder.none,
    contentPadding: EdgeInsets.all(0),
  ),
  cursorHeight: 25,
  cursorRadius: Radius.circular(10),
  maxLines: 1,
  style: TextStyle(
    fontSize: 15,
  ),
  onChanged: (value) {
    setState(() {
      _typedContent = value;
    });
  },

Is there any way to make the cursor center vertically even when there is no text input?

dart flutter
2 Answers

Custom the height of the text (height property)

  TextField(
    style: TextStyle(
      height: 1.5
    ),
  ),
user_127854900

Firstly you can remove the cursorHeight property if it is not a must.

Second option is using the height property of your TextStyle. As far as I remember you can start trying with following ratio: cursorHeight/textSize. In any case I recommend you reading about height property of TextStyle.

style: TextStyle(
          fontSize: 15,
          height: 25/15
        ),
user_142692220
Related