Change the cursor position from top to bottom in a Flutter textfield

Question

I need to change the position of the cursor inside the textformfield. I managed to reduce the height of the cursor with 1, but the position of the cursor remains top. I was not be able to move it to the bottom.

I wanted to achieve this:

But what I achieve is:

Is there a way to do it in Flutter?

My code sample

TextFormField(
  style: TextStyle(
    color: Theme.of(context).textTheme.bodySmall?.color,
    fontSize: 14,
  ),
  minLines: 1,
  maxLines: 1,
  maxLength: 300,
  cursorColor: Theme.of(context).hintColor,
  textAlignVertical: TextAlignVertical.center,
  cursorHeight: 1,
  cursorWidth: 15,
);

Answer 1

TextFormField has the property of height inside the style - you can apply 0.0 on height to achieve your output. also from bottom or top padding you can use contentPadding so you can apply or remove the padding from top left to bottom right from cursor to input line :

 return Scaffold(
      appBar: AppBar(),
      body: TextFormField(
        style: TextStyle(
          color: Theme.of(context).textTheme.bodySmall?.color,
          fontSize: 26,
          height: 0.0, 
        ),
        minLines: 1,
        maxLength: 300,
        cursorColor: Theme.of(context).hintColor,
        textAlignVertical: TextAlignVertical.center,
        cursorHeight: 1,
        cursorWidth: 15,
        decoration: const InputDecoration(
            contentPadding: EdgeInsets.zero, border: InputBorder.none),
      ),
    );

Answer 2

Add style in your TextFormField height: 0.1

TextFormField(
          style: TextStyle(
            color: Theme.of(context).textTheme.bodySmall?.color,
            fontSize: 14,
            height: 0.1, // you need to add this only
          ),
          minLines: 1,
          maxLines: 1,
          maxLength: 300,
          cursorColor: Theme.of(context).hintColor,
          textAlignVertical: TextAlignVertical.center,
          cursorHeight: 1,
          cursorWidth: 15,
        ),    

For CupertinoTextField

CupertinoTextField(
          placeholder: 'search',
          style: TextStyle(
            height: 0.1,
            fontSize: 20,
          ),
          cursorHeight: 1,
          cursorWidth: 15,
        ),    

Answer 3

I would want to add to rahulVFlutterAndroid's answer.

Why is this observed?

Because, by default, the cursor starts from left top of the textField. By changing the height of the cursor, the cursor moved to the top left position.

How can we overcome this?

Use height and set it to 0.0:

body:TextFormField(
        style: TextStyle(
          /* ... */
          height: 0.0, /*   This should solve your problem  */
        ),
        /* ... */
     );

Answer 4

• If you don't set cursorHeight to the height of the font, it won't work as expected when the font gets bigger.
• This will help componentize based on dynamic font

 Widget build(BuildContext context) {
    var fontSize = 50.0;
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            style: TextStyle(fontSize: fontSize),
            minLines: 1,
            maxLines: 1,
            maxLength: 300,
            cursorColor: Theme.of(context).hintColor,
            textAlignVertical: TextAlignVertical.center,
            cursorHeight: fontSize,
          ),
        ],
      ),
    );
  }