Question 78140 in Flutter Question posted in
The official Flutter documentation can be found here.

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

4

Answers


  1. 0

    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,
        ),
    Login or Signup to reply.
  2. 0

    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),
      ),
    );
    Login or Signup to reply.
  3. 0
    • 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,
          ),
        ],
      ),
    );
  }
    Login or Signup to reply.
  4. 0

    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  */
        ),
        /* ... */
     );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search