Search code examples
flutterdarttextformfieldflutter-textformfield

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


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:

Enter image description here

But what I achieve is:

Enter image description here

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,
);

Solution

  • 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 :output

     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),
          ),
        );