[Android] When setting a cursorHeight's value, the cursor position is too high #143480

dmvvilela · 2024-02-14T19:43:02Z

Steps to reproduce

I made this TextFormField.. it uses cursor height, maybe has something to do with it:

TextFormField(
        controller: controller,
        onSaved: onSaved,
        textInputAction: TextInputAction.done,
        inputFormatters: formatter != null ? [formatter!] : null,
        keyboardType: numeric
            ? TextInputType.numberWithOptions(decimal: true)
            : TextInputType.text,
        cursorColor: AppTheme.darkLight,
        cursorHeight: 14,
        style: TextStyle(
          color: AppTheme.primaryColorDark,
          fontSize: 16,
        ),
        decoration: InputDecoration(
          labelText: label,
          labelStyle: context.textTheme.labelLarge!.copyWith(
            color: AppTheme.darkLight,
            fontWeight: FontWeight.w400,
          ),
          contentPadding: EdgeInsets.only(bottom: 2.5, top: 12),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0x0D000000), width: 1.5),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0x0D000000), width: 1.5),
          ),
          suffixText: suffixText,
          suffixStyle: context.textTheme.labelMedium!.copyWith(
            color: AppTheme.darkLight,
            fontWeight: FontWeight.w400,
            fontSize: 13,
          ),
          hintText: hintText,
          hintStyle: TextStyle(color: Colors.grey, fontSize: 12),
        ),
        validator: validator,
        onTapOutside: (_) => context.scopeUnfocus(),
      ),

Use it on a samsung Galaxy s22 device..

Expected results

Actual results

Code sample

TextFormField(
        controller: controller,
        onSaved: onSaved,
        textInputAction: TextInputAction.done,
        inputFormatters: formatter != null ? [formatter!] : null,
        keyboardType: numeric
            ? TextInputType.numberWithOptions(decimal: true)
            : TextInputType.text,
        cursorColor: AppTheme.darkLight,
        cursorHeight: 14,
        style: TextStyle(
          color: AppTheme.primaryColorDark,
          fontSize: 16,
        ),
        decoration: InputDecoration(
          labelText: label,
          labelStyle: context.textTheme.labelLarge!.copyWith(
            color: AppTheme.darkLight,
            fontWeight: FontWeight.w400,
          ),
          contentPadding: EdgeInsets.only(bottom: 2.5, top: 12),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0x0D000000), width: 1.5),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0x0D000000), width: 1.5),
          ),
          suffixText: suffixText,
          suffixStyle: context.textTheme.labelMedium!.copyWith(
            color: AppTheme.darkLight,
            fontWeight: FontWeight.w400,
            fontSize: 13,
          ),
          hintText: hintText,
          hintStyle: TextStyle(color: Colors.grey, fontSize: 12),
        ),
        validator: validator,
        onTapOutside: (_) => context.scopeUnfocus(),
      );

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

flutter doctor -v
[✓] Flutter (Channel stable, 3.16.9, on macOS 14.2.1 23C71 darwin-arm64, locale pt-BR)
    • Flutter version 3.16.9 on channel stable at /Users/danvilela/Code/Misc/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (3 weeks ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/danvilela/Library/Android/sdk
    • Platform android-34, build-tools 32.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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 17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] Connected device (4 available)
    • Daniel's iPhone 13 Pro (mobile) • 00008110-001A11283E38801E            • ios            • iOS 17.2.1 21C66
    • iPhone 15 Pro (mobile)          • C1C8AB6F-F631-4AF4-B90E-2D72CCE36136 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 14.2.1 23C71
      darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome
      121.0.6167.160

[✓] Network resources
    • All expected network resources are available.

• No issues found!

huycozy · 2024-02-15T10:02:52Z

Hi @dmvvilela
This isn't a device-specific issue as I can repro it on Realme 6, Android 11. But I also see you are setting cursorHeight: 14 which I think it's WAI. You can try removing it or setting a higher value to see the difference.

dmvvilela · 2024-02-15T13:21:58Z

Hey @huycozy . Yeah, I tested on a motorola, same thing. It seems that it is an Android thing since iOS don't have this error. I don't know what WAI means. But i set this height cause the default behavior was already weird. This is a bug.

huycozy · 2024-02-16T05:10:54Z

I meant it works as intended (WAI) as you specified a custom cursorHeight instead of leaving it as default which is preferredLineHeight, see:

flutter/packages/flutter/lib/src/rendering/editable.dart

Line 1105 in 6f6950b

double get cursorHeight => _cursorHeight ?? preferredLineHeight;

But since you mentioned iOS, I checked this and saw the different results between Android and iOS apps (and also on Web and macOS app). It looks worse on Android.

Android	iOS

Web	macOS app

Perhaps this is related to caret calculation at getLocalRectForCaret for target platforms.

Simpler sample code

import 'package:flutter/material.dart';

void main() async {
  runApp(
    const MaterialApp(
      title: 'Flutter Demo',
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextFormField(
          keyboardType: TextInputType.text,
          textAlignVertical: TextAlignVertical.center,
          cursorHeight: 14,
          style: const TextStyle(
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.0, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (2 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 121.0.6167.160
    ! Error: Browsing on the local area network for iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.20.0-7.0.pre.79, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.20.0-7.0.pre.79 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7b9f7be7f6 (38 minutes ago), 2024-02-15 18:13:21 -0800
    • Engine revision bc4dd534a0
    • Dart version 3.4.0 (build 3.4.0-143.0.dev)
    • DevTools version 2.33.0-dev.6
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D          • android-arm64  • Android 11 (API 30)
    • iPad (mobile)    • 00008103-000A1464346A201E • ios            • iOS 17.2 21C62
    • macOS (desktop)  • macos                     • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                    • web-javascript • Google Chrome 121.0.6167.160

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

taosimple · 2024-02-16T08:50:32Z

@huycozy I also encountered this issue. I increased the line height to 2.5, the cursor height is also increased, it looks weird, and i change the cursor height, also encountering the issue mentioned.
May be it is a android default behavior, is it possible to provide some customization options, like set cursor offset or something, or is there a workaround to apply ios behavior to android.

dmvvilela · 2024-02-17T01:23:18Z

Thanks for clearing it out. About working as intended though.. The only reason i changed the height (and not used preferredLineHeight) is because it was really weird! Cursor was like double the size of my text.. shouldn't be the default behaviour.

taosimple · 2024-02-20T03:58:21Z

I find after set TextStyle.height and cursorHeight also looks worse on iOS.

Container(
        child: TextField(
          keyboardType: TextInputType.multiline,
          maxLines: null,
          textAlignVertical: TextAlignVertical.center,
          cursorHeight: 16,
          showCursor: true,
          style: TextStyle(
            fontSize: 16,
            height: 3,
          ),
        ),
      )

Container(
        child: CupertinoTextField(
          keyboardType: TextInputType.multiline,
          maxLines: null,
          textAlignVertical: TextAlignVertical.center,
          cursorHeight: 16,
          showCursor: true,
          style: TextStyle(
            fontSize: 16,
            height: 3,
          ),
        ),
      )

flutter doctor -v

 Flutter (Channel stable, 3.19.0, on macOS 13.6 22G120 darwin-arm64 (Rosetta), locale en-US)
    • Flutter version 3.19.0 on channel stable at /Users/taotao/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (6 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

justinmc · 2024-02-22T23:01:41Z

CC @LongCatIsLooong from triage. Might be related to your strut work, or maybe the cursor should be baseline aligned.

justinmc · 2024-02-22T23:16:22Z

Potentially related to #143216

taosimple · 2024-02-23T02:30:07Z

CC @LongCatIsLooong from triage. Might be related to your strut work, or maybe the cursor should be baseline aligned.

Cursor position aligned with the calculated highlight selected text rect may be is a perfect solution

tummyhuang · 2024-03-19T12:27:30Z

same issue ：(

github-actions · 2024-04-19T05:00:41Z

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.

@OverRide

…rms). (flutter#145829) ## Description This PRs fixes the cursor vertical position when a custom cursor height is set on non-Apple platforms (on Apple platforms the cursor is already centered) . | Before | After | |--------|--------| | ![image](https://github.com/flutter/flutter/assets/840911/2d1b855d-d36c-4941-85be-5044ea0e9bb2) | ![image](https://github.com/flutter/flutter/assets/840911/306510c8-42ca-45c7-8c25-ddfa2e22c7f3) | <details><summary>Code sample used for the screenshots (cursorHeight 18, font size 16, line height 2)</summary> ```dart import 'package:flutter/material.dart'; void main() async { runApp( const MaterialApp( title: 'Flutter Demo', home: MyApp(), ), ); } class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return const Scaffold( body: Center( child: TextField( cursorHeight: 18, style: TextStyle(fontSize: 16, height: 2), ), ), ); } } ``` </details> ## Related Issue Fixes flutter#143480 ## Tests Adds 2 tests, updates 1.

huycozy added the in triage Presently being triaged by the triage team label Feb 15, 2024

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 15, 2024

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 15, 2024

huycozy changed the title ~~Weird TextField cursor on Samsung S22~~ [Android] When setting a cursorHeight's value, the cursor position is too high compared to iOS Feb 16, 2024

huycozy changed the title ~~[Android] When setting a cursorHeight's value, the cursor position is too high compared to iOS~~ [Android] When setting a cursorHeight's value, the cursor position is too high Feb 16, 2024

justinmc added P2 Important issues not at the top of the work list triaged-design Triaged by Design Languages team labels Feb 22, 2024

bleroux self-assigned this Mar 5, 2024

huycozy mentioned this issue Mar 22, 2024

Issue with TextField Line Spacing and Cursor Height in Flutter #145394

Closed

This was referenced Mar 25, 2024

[bug] textField contentPadding causes incorrect alignment and hides text #145255

Closed

Fix cursor is not centered when cursorHeight is set (non-Apple platforms). #145829

Merged

auto-submit bot closed this as completed in #145829 Apr 5, 2024

auto-submit bot closed this as completed in a5ea2ef Apr 5, 2024

bleroux added the r: fixed Issue is closed as already fixed in a newer version label Apr 5, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] When setting a cursorHeight's value, the cursor position is too high #143480

[Android] When setting a cursorHeight's value, the cursor position is too high #143480

dmvvilela commented Feb 14, 2024 •

edited by huycozy

huycozy commented Feb 15, 2024

dmvvilela commented Feb 15, 2024

huycozy commented Feb 16, 2024 •

edited

taosimple commented Feb 16, 2024 •

edited

dmvvilela commented Feb 17, 2024

taosimple commented Feb 20, 2024 •

edited

justinmc commented Feb 22, 2024

justinmc commented Feb 22, 2024

taosimple commented Feb 23, 2024 •

edited

tummyhuang commented Mar 19, 2024

github-actions bot commented Apr 19, 2024

[Android] When setting a cursorHeight's value, the cursor position is too high #143480

[Android] When setting a cursorHeight's value, the cursor position is too high #143480

Comments

dmvvilela commented Feb 14, 2024 • edited by huycozy

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Feb 15, 2024

dmvvilela commented Feb 15, 2024

huycozy commented Feb 16, 2024 • edited

taosimple commented Feb 16, 2024 • edited

dmvvilela commented Feb 17, 2024

taosimple commented Feb 20, 2024 • edited

justinmc commented Feb 22, 2024

justinmc commented Feb 22, 2024

taosimple commented Feb 23, 2024 • edited

tummyhuang commented Mar 19, 2024

github-actions bot commented Apr 19, 2024

dmvvilela commented Feb 14, 2024 •

edited by huycozy

huycozy commented Feb 16, 2024 •

edited

taosimple commented Feb 16, 2024 •

edited

taosimple commented Feb 20, 2024 •

edited

taosimple commented Feb 23, 2024 •

edited