Cursor with custom height has an incorrect vertical position when the text field is empty

The cursor position behaves weirdly when the text field is empty and a cursor height has been provided.
On Web the cursor has different vertical positions when the text field is empty and when there is text.

Steps to Reproduce

Run flutter create bug.
Update main.dart with the code sample:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(8.0),
          child: TextFieldBug(),
        ),
      ),
    ),
  );
}

class TextFieldBug extends StatelessWidget {
  const TextFieldBug({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const double fontSize = 16;
    const double verticalPadding = 6;

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        TextField(
          style: TextStyle(
            color: Color(0xFF939393),
            fontSize: fontSize,
          ),
          cursorHeight: 24,
          keyboardType: TextInputType.emailAddress,
          textInputAction: TextInputAction.next,
          cursorColor: Color(0xFF939393),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(
              horizontal: 18,
              vertical: verticalPadding,
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            filled: true,
            fillColor: Color(0xFFF4F4F4),
            floatingLabelBehavior: FloatingLabelBehavior.never,
            hoverColor: Color(0xFFF4F4F4),
            focusColor: Color(0xFFF4F4F4),
            isDense: true,
          ),
        )
      ],
    );
  }
}

Type some text

Expected results:
The cursor is always aligned properly on the vertical axis, regardless if the textfield has text or not.

Actual results:
The cursor has a different vertical position when text has been typed then when there is none.
The cursor is pushed upwards when there is text. It sticks out from the top of the text field but is touching the bottom of the text field.

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.2.3 20D91 darwin-x64, locale en-BE)
    • Flutter version 2.2.3 at /Users/navaronbracke/Documents/flutter
    • Framework revision f4abaa0735 (5 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/navaronbracke/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/navaronbracke/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.25.0

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131

• No issues found!

It's even easier to notice with cursorWidth: 1 and isCollapsed: true.

Verified this using latest master and seems to be occuring on mobile as well, so this doesn't seem to be web specific.

Mobile behavior:

RPReplay-Final1628248600.MP4

flutter doctor -v

[✓] Flutter (Channel master, 2.5.0-6.0.pre.21, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.5.0-6.0.pre.21 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 40e8620a27 (7 hours ago), 2021-08-06 09:14:50 +0430
    • Engine revision 431ac604da
    • Dart version 2.14.0 (build 2.14.0-383.0.dev)

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.58.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 92.0.4515.131

• No issues found!

@darshankawar

@darshankawar Thanks for the fast response and repro. I assume this is a regression?

Same problem exists with default TextField too.

Empty	One Space

minimal code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(8.0),
          child: Center(
            child: TextField(),
          ),
        ),
      ),
    ),
  );
}

@justinmc

cc @justinmc @LongCatIsLooong

Possibly related to #64072

I can no longer reproduce this on stable. (3.13.4)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Cursor with custom height has an incorrect vertical position when the text field is empty #87790

Steps to Reproduce

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cursor with custom height has an incorrect vertical position when the text field is empty #87790

Description

Steps to Reproduce

Activity

navaronbracke commented on Aug 6, 2021

darshankawar commented on Aug 6, 2021

navaronbracke commented on Aug 6, 2021

werainkhatri commented on Aug 8, 2021

chinmaygarde commented on Aug 9, 2021

justinmc commented on Jul 14, 2022

navaronbracke commented on Sep 20, 2023

github-actions commented on Oct 4, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions