Update default `selectionHeightStyle` and `selectionWidthStyle` for `EditableText` #167762

Renzo-Olivares · 2025-04-24T20:47:43Z

This change updates the default selectionHeightStyle and selectionWidthStyle for EditableText to more closely match the behavior on native platforms.

/// The default value for [selectionHeightStyle].
///
/// On web platforms, this defaults to [ui.BoxHeightStyle.max].
///
/// On native platforms, this defaults to [ui.BoxHeightStyle.includeLineSpacingMiddle] for all
/// platforms.
static ui.BoxHeightStyle get defaultSelectionHeightStyle {
  if (kIsWeb) {
    return ui.BoxHeightStyle.max;
  }
  switch (defaultTargetPlatform) {
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.iOS:
    case TargetPlatform.linux:
    case TargetPlatform.macOS:
    case TargetPlatform.windows:
      return ui.BoxHeightStyle.includeLineSpacingMiddle;
  }
}

/// The default value for [selectionWidthStyle].
///
/// On web platforms, this defaults to [ui.BoxWidthStyle.max] for Apple platforms and
/// [ui.BoxWidthStyle.tight] for all others.
///
/// On non-web platforms, this defaults to [ui.BoxWidthStyle.max] for all
/// platforms.
static ui.BoxWidthStyle get defaultSelectionWidthStyle {
  if (kIsWeb) {
    if (defaultTargetPlatform == TargetPlatform.iOS || WebBrowserDetection.browserIsSafari) {
      return ui.BoxWidthStyle.max;
    }
    return ui.BoxWidthStyle.tight;
  }
  switch (defaultTargetPlatform) {
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.iOS:
    case TargetPlatform.linux:
    case TargetPlatform.macOS:
    case TargetPlatform.windows:
      return ui.BoxWidthStyle.max;
  }
}

Native Selection Style Behavior

Android Native Behavior

Component Type	UI Framework / Component	Image
Static Text	Android TextView
Static Text	Jetpack Compose Text
Static Text	Chrome (Web) "p element"
Text Field	Android EditText
Text Field	Jetpack Compose TextField

iOS Native Behavior

Component Type	UI Framework / Component	Image
Text Field	Native SwiftUI TextEditor
Text Field	Native SwiftUI TextField
Static Text	Safari (Web) "p element"

macOS Native Behavior

Component Type	UI Framework / Component	Image
Static Text	Native SwiftUI Text
Static Text	Chrome (Web) "p element"
Static Text	Firefox (Web) "p element"
Static Text	Safari (Web) "p element"
Text Field	Native SwiftUI TextEditor
Text Field	Native SwiftUI TextField

Flutter Selection Style Behavior

Flutter Before Behavior

This was the behavior on all platforms before this change.

Component Type	Behavior	Image
Text Field	Flutter TextField
Static Text	Flutter SelectableText

Flutter Chrome After Behavior

This is the behavior on all chrome web after this change.

Component Type	Behavior	Image
Static Text	Flutter SelectableText in Chrome
Text Field	Flutter TextField in Chrome

Flutter Safari After Behavior

This is the behavior on Safari after this change. (all iOS browsers, and Safari on macOS).

Component Type	Behavior	Image
Text Field	Flutter TextField in Safari
Static Text	Flutter SelectableText in Safari

Flutter Native After Behavior

This is the behavior on native platforms after this change.

Component Type	Behavior	Image
Static Text	Flutter SelectableText on Native platforms
Text Field	Flutter TextField on Native platforms

Fixes #68675

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
I signed the [CLA].
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
All existing and new tests are passing.

flutter-dashboard · 2025-04-25T19:52:28Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha 0437620

flutter-dashboard · 2025-04-29T18:21:42Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha b0a86f0

flutter-dashboard · 2025-05-01T19:24:58Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha 21b08e8

Renzo-Olivares · 2025-05-02T20:02:59Z

packages/flutter/lib/src/cupertino/text_field.dart

@@ -283,8 +283,8 @@ class CupertinoTextField extends StatefulWidget {
    this.cursorRadius = const Radius.circular(2.0),
    this.cursorOpacityAnimates = true,
    this.cursorColor,
-    this.selectionHeightStyle = ui.BoxHeightStyle.tight,


I see this a lot in the framework where higher level widgets set their default to the same as their basic counterpart, i.e. TextField sets the same defaults as EditableText. Is this a pattern we want to be strict about? Can we just keep the defaults in EditableText and have TextField fall back on that. This PR does this for selectionHeightStyle and selectionWidthStyle, but i'm curious what others think.

This has come up a few times and I have softly decided to support setting the default everywhere. I just sent you some notes I wrote about it.

Hm it seems a drawback of omitting the default value here is that the property becomes nullable? It seems like a small usability win to have a non-nullable property if we set the default everywhere.

Also, not setting the default property also makes this particular change a breaking change. I'd lean towards avoid a breaking change if possible.

Ah but since EditableText.defaultSelectionHeightStyle and EditableText.defaultSelectionWidthStyle are non-const, we can't actually use them as default values in a const constructor? If that's the case, I'm OK with changing these to be null by default.

Yeah it won't be possible to set the defaults because the selectionStyle getters are non-const. Even in the non-const constructors if the parameter is a named one its default value has to be const. Is this considered a breaking change because TextField().selectionHeightStyle/selectionWidthStyle now return null?

Is this considered a breaking change because TextField().selectionHeightStyle/selectionWidthStyle now return null?

Strictly speaking, yes.

One way to avoid this breaking change would be by making TextField().selectionHeightStyle/selectionWidthStyle getters that return EditableText.defaultSelectionWidthStyle/defaultSelectionWidthStyle instead of null. That feels a bit weird though, I suspect the breaking change is the better solution long-term.

flutter-dashboard · 2025-05-02T20:54:58Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha 7fd1f42

Renzo-Olivares · 2025-05-08T01:22:26Z

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

@@ -324,8 +324,8 @@ class RenderEditable extends RenderBox
    bool paintCursorAboveText = false,
    Offset cursorOffset = Offset.zero,
    double devicePixelRatio = 1.0,
-    ui.BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,
-    ui.BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
+    ui.BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.max,


I set this to a reasonable default that wouldn't cause a line with runs of different heights to create "ledges".

I'm on board with that. I've seen the "ledges" problem come up before and wondered why we didn't do this in the first place. We can always undo it if it breaks something we're not thinking of.

Renzo-Olivares · 2025-05-08T04:56:16Z

packages/flutter/test/rendering/editable_test.dart

@@ -1659,9 +1659,9 @@ void main() {
      composingRect = editable.getRectForComposingRange(const TextRange(start: 6, end: 7))!;
      expect(composingRect, const Rect.fromLTRB(0.0, 14.0, 14.0, 28.0));
      composingRect = editable.getRectForComposingRange(const TextRange(start: 7, end: 8))!; // H
-      expect(composingRect, const Rect.fromLTRB(14.0, 18.0, 24.0, 28.0));


This test change makes sense since now that the default is BoxHeightStyle.max, these rects have a height of the largest span on the line which are the WidgetSpans in this test with a height of 14.0.

flutter-dashboard · 2025-05-08T05:34:23Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha 9a92460

flutter-dashboard · 2025-05-14T21:23:45Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha 54c1043

Renzo-Olivares · 2025-05-15T00:23:47Z

One style that doesn't seem possible using the currently available BoxHeightStyle is the firefox default. I was able to modify SkParagraph to achieve the behavior Renzo-Olivares/skia@375a285 , but it still needs some work. I'll try to tackle that change at a later time.

flutter-dashboard · 2025-06-16T18:16:09Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #167762 at sha ccfd64a

…yle` for `EditableText` (flutter/flutter#167762)

Renzo-Olivares force-pushed the default-text-height-style branch 2 times, most recently from 673b3cc to 2d72f21 Compare April 25, 2025 18:27

flutter-dashboard bot added the will affect goldens Changes to golden files label Apr 25, 2025

Renzo-Olivares force-pushed the default-text-height-style branch from 0b3f5ca to b0a86f0 Compare April 29, 2025 17:23

Renzo-Olivares force-pushed the default-text-height-style branch 3 times, most recently from f1379ae to 21b08e8 Compare May 1, 2025 18:29

Renzo-Olivares force-pushed the default-text-height-style branch from 21b08e8 to 7fd1f42 Compare May 2, 2025 20:00

Renzo-Olivares commented May 2, 2025

View reviewed changes

Renzo-Olivares commented May 8, 2025

View reviewed changes

Renzo-Olivares force-pushed the default-text-height-style branch 2 times, most recently from 2e52273 to 9a92460 Compare May 8, 2025 04:36

Renzo-Olivares commented May 8, 2025

View reviewed changes

Renzo-Olivares force-pushed the default-text-height-style branch from 166f040 to 4ce5255 Compare May 8, 2025 18:36

Renzo-Olivares changed the title ~~Test changing default selectionHeightStyle~~ Update default selectionHeightStyle for EditableText May 8, 2025

Renzo-Olivares force-pushed the default-text-height-style branch from a4c9c39 to 54c1043 Compare May 14, 2025 20:30

Renzo-Olivares changed the title ~~Update default selectionHeightStyle for EditableText~~ Update default selectionHeightStyle and selectionWidthStyle for EditableText May 15, 2025

Renzo-Olivares requested review from justinmc and loic-sharma May 15, 2025 16:13

Renzo Olivares added 9 commits June 16, 2025 10:45

Address reviewer comments

3bbcddc

update tests

0b3ca3c

Add some defaults

3ec1620

Address reviewer comments

7de9fbc

update docs

0454ab4

fix analyzer

23d88f1

keep web browser detection logic private for now

7fbd318

update cupertino textfield borderless constructor

af4dd5e

Address reviewer comments

ccfd64a

Renzo-Olivares force-pushed the default-text-height-style branch from f2787cb to ccfd64a Compare June 16, 2025 17:45

Renzo-Olivares added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 16, 2025

auto-submit bot added this pull request to the merge queue Jun 16, 2025

Merged via the queue into flutter:master with commit fe6c969 Jun 16, 2025
70 of 71 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jun 16, 2025

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to e974d1050328 (48 revisions) flutter/packages#9437

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

b1e6404

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to 50eaf00c2d45 (49 revisions) flutter/packages#9438

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

7610715

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to d9c64f4d298d (50 revisions) flutter/packages#9439

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

22e3b7b

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to 2d5987027db4 (51 revisions) flutter/packages#9440

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

6e009c9

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to eaad9f44e2c4 (52 revisions) flutter/packages#9441

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

6e6af6a

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to 22dc6b656654 (53 revisions) flutter/packages#9442

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

4060909

…yle` for `EditableText` (flutter/flutter#167762)

engine-flutter-autoroll mentioned this pull request Jun 17, 2025

Roll Flutter from 8303a96a0a99 to e496ad5ea754 (54 revisions) flutter/packages#9443

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 17, 2025

fe6c9690b Update default selectionHeightStyle and `selectionWidthSt…

061d14c

…yle` for `EditableText` (flutter/flutter#167762)

Update default selectionHeightStyle and selectionWidthStyle for EditableText #167762

Update default selectionHeightStyle and selectionWidthStyle for EditableText #167762

Conversation

Renzo-Olivares commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Native Selection Style Behavior

Android Native Behavior

iOS Native Behavior

macOS Native Behavior

Flutter Selection Style Behavior

Flutter Before Behavior

Flutter Chrome After Behavior

Flutter Safari After Behavior

Flutter Native After Behavior

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Apr 25, 2025

Uh oh!

flutter-dashboard bot commented Apr 29, 2025

Uh oh!

flutter-dashboard bot commented May 1, 2025

Uh oh!

Renzo-Olivares May 2, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc May 15, 2025

Choose a reason for hiding this comment

Uh oh!

loic-sharma May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

loic-sharma May 15, 2025

Choose a reason for hiding this comment

Uh oh!

Renzo-Olivares May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

loic-sharma May 29, 2025

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented May 2, 2025

Uh oh!

Renzo-Olivares May 8, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc May 15, 2025

Choose a reason for hiding this comment

Uh oh!

Renzo-Olivares May 8, 2025

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented May 8, 2025

Uh oh!

flutter-dashboard bot commented May 14, 2025

Uh oh!

Renzo-Olivares commented May 15, 2025

Uh oh!

flutter-dashboard bot commented Jun 16, 2025

Uh oh!

Uh oh!

Uh oh!

Update default `selectionHeightStyle` and `selectionWidthStyle` for `EditableText` #167762

Update default `selectionHeightStyle` and `selectionWidthStyle` for `EditableText` #167762

Renzo-Olivares commented Apr 24, 2025 •

edited

Loading

loic-sharma May 15, 2025 •

edited

Loading

Renzo-Olivares May 20, 2025 •

edited

Loading