Make the text field cursor configurable

[vlidholt]

Steps to Reproduce

Go to the Text Fields demo in the Flutter Gallery. Type some text. Compare the text cursor to any other iOS app. The cursor in Flutter is too short and too thin.

Flutter Doctor

[✓] Flutter (Channel dev, v0.2.0, on Mac OS X 10.13.2 17C88, locale en-US)
    • Flutter version 0.2.0 at /Users/vik/Projects/flutter
    • Framework revision f8ac23cd86 (10 days ago), 2018-03-05 23:27:57 +0100
    • Engine revision a00f8e8bc0
    • Dart version 2.0.0-dev.32.0.flutter-ee15c8eb68

[!] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/vik/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)
    ✗ Android license status unknown.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    • ios-deploy 1.9.2
    • CocoaPods version 1.2.0

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio - old.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Community Edition (version 2017.2.5)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 20.0.2
    • Dart plugin version 172.4343.25

[✓] Connected devices (1 available)
    • Viktor’s iPhone • 0f78a8bf61e64931b13636987dc7597b86ba55a7 • ios • iOS 11.2.6

! Doctor found issues in 1 category.

[xster]

Can you show a screenshot? Tested on the gallery though both just draw the caret by painting a Rect (0.0, 2.0, 1.0, 17.0) with the same color (0xff90caf9) and looks the same to me.

cc @alardizabal who saw similar issues.

[vlidholt]

Oops haven't checked in here for a while. @Hixie @xster this seem to still be an issue. At least with the Beta. Caret in Flutter is way thinner and shorter than in native apps. Also the color is not correct, at least for iOS. Providing a screen shot for comparison.

Generally, the quality of the text fields is definitely the weakest thing in Flutter. I have a bunch of features that I'm holding off developing until the text fields feel more stable/native.

[vlidholt]

Update: Also checked the native text inputs on Android, while they look wildly different in different apps, no-one matches Flutter. I figured that Chrome probably has the most standard one, which looks pretty similar to the one on iOS. Different apps also use different colors, so being able to choose a color would be nice.

[xster]

Ah I see. When you said short, I thought it was just #16257 though there are indeed other issues.

Yes, the width does look different from the OS one. My suggestion is to also add cursor width to EditableText, then style it with a Cupertino TextField #13695. The cursorColor is already configurable on the EditableText.

[xster]

Also cc @willlarche on whether a Material TextField should auto adapt text cursor color. It's currently textSelectionColor which is primarySwatch[200]

[willlarche]

Cursor color should always be either the active color or error color. See MDC-iOS.

These colors are themeable. The active color should be the primary or primaryVariant color. The error color is the error color. See Color theme creation. If those values don't exist yet, consult with @HansMuller for short-term plan.

[xster]

Seems mostly compatible with native iOS. To make a Material analogy, the iOS cursor colors are mostly the primary color swatch colors. For instance, the App Store's nav bar buttons, the tab bar buttons and the cursor are all the same standard active blue color. The Health app also has all of its active colors in the same red color.

Here, at least for the color, having the cursor color also be the theme's primary color seems sensible. In your example @vlidholt, the Gallery and the iOS notes app simply has different themes.

We'll still want to have a configurable width however.

[vlidholt]

@xster thanks for reopening this. If you look a bit more carefully you will also see that the height of the cursor is different (it's not just the height of the text, but maybe the full line height?) and that the iOS cursor has rounded edges.

[xster]

Makes sense, we should keep the height and the rounded corners in mind when adapting.

[xster]

In terms of code, we should start at EditableText and add new fields double cursorWidth and Radius cursorRadius. Pipe that through _Editable to RenderEditable.

Make sure the width is accounted for in _caretPrototype and the various places where layout is done.

In _paintCaret, switch on whether Radius is null and either create the Rect like it is now or create an RRect instead with the provided Radius and call canvas.drawRRect instead.

[sandrasandeep]

I am also going to add a parameter in the EditableText constructor for cursorHeight.

Also, as a note, it looks like the active color for the cursor is different from the regular "activeBlue" color. Also, the cursor color is not always the active color or the error color. For example, in the native Notes app, the cursor color is orange.

[sandrasandeep]

yes, it is done @xster

[xster]

@droidery: we added these APIs in preparation for a CupertinoTextField (#13695). Did you wish these options to be added to the Material TextField? It's currently not in the Material spec.

[droidery]

@xster It would be helpful if it was in the Material TextField, as the Flutter cursor width is too small when comparing the Flutter TextField cursor with a native cursor. e.g. in the Gmail app the "to" field has a thicker cursor, while typing in the body field the cursor is thinner. In the Flutter equivalent the cursor is always thin.

[xster]

cc @willlarche, @HansMuller.

I don't see the cursor adaptability in the specs. Should we make this modification in the Material TextField?

[willlarche]

I think we should expose those properties in Material, yes.

Also, listening to @droidery it sounds like the default values for them should be tweaked as well. If the spec does not have enough information, let me know and we can inspect the raw designs.

[alanrussian]

This is blocking Mulligan. cc @johnfesa

[xster]

Sounds like @sandrasandeep is working on this (Material TextField) as of this morning.

[yohom]

So far I have only found cursorWidth, cursorRadius and cursorColor in EditableText. When will cursorHeight be added? @sandrasandeep

[panuavakul]

+1 to this. This is actually a pretty big problem when using other language like Japanese, which the character is larger than English letters with same font size so the cursor looks even smaller. An option for cursorHeight would be great.

[zoechi]

@panuavakul this issue is closed since a while.
If you're still seeing this please create a new issue with a properly filled out issue template.

[changfeifan]

cursorHeight

I can not find cursorHeight at EditableText widget.Is it merge to master or dev branch?

[xster]

There is no cursorHeight API. The general incorrect cursor height problem on non-latin scripts will be fixed separately in #20183

[vishna]

@xster Here's what cursor height looks for Sailec font

on Android Native:

on Android Flutter:

That cursorHeight API would be useful to have.

[xster]

If you're still facing cursor height issues, please open a new issue. Please also note that it's worth checking on master again since we've fixed some line height issues on master since #27612.

[github-actions]

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.