flutter_flutter

mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00

History

Update default selectionHeightStyle and selectionWidthStyle for EditableText (#167762 )

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

```dart
/// 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 | <img height="400"
alt="native_android_static_textview"
src="https://github.com/user-attachments/assets/34da885c-c3d8-4ecc-baf5-65cd32850aa7"
/> |
| **Static Text** | Jetpack Compose Text | <img height="400"
alt="native_android_static_compose"
src="https://github.com/user-attachments/assets/ef916e8d-3627-4394-b5a1-aa59989ba826"
/> |
| **Static Text** | Chrome (Web) "p element" | <img height="400"
alt="android_chrome_web"
src="https://github.com/user-attachments/assets/b6537871-5d07-470b-bdee-ae0d222b2404"
/> |
| **Text Field** | Android EditText | <img height="400"
alt="native_android_textfield_edittext"
src="https://github.com/user-attachments/assets/ef91c6c3-eed0-4cf5-8b6f-182ecf8ce60b"
/> |
| **Text Field** | Jetpack Compose TextField | <img height="400"
alt="native_android_textfield_compose"
src="https://github.com/user-attachments/assets/891c28ba-66f7-4923-a1d3-839cad3b039c"
/> |

### iOS Native Behavior

| Component Type | UI Framework / Component | Image |
|---|---|---|
| **Text Field** | Native SwiftUI TextEditor | <img height="400"
alt="native_ios_texteditor"
src="https://github.com/user-attachments/assets/b99adb30-8cb3-454e-aa56-41f3cfadeeed"
/> |
| **Text Field** | Native SwiftUI TextField | <img height="400"
alt="native_ios_textfield"
src="https://github.com/user-attachments/assets/0544419b-b9a7-4641-930b-9a123f9a7720"
/> |
| **Static Text** | Safari (Web) "p element" | <img height="400"
alt="mobile_safari_web"
src="https://github.com/user-attachments/assets/6934ed80-4712-4000-bff0-4d5d2833abbe"
/> |

### macOS Native Behavior

| Component Type | UI Framework / Component | Image |
|---|---|---|
| **Static Text** | Native SwiftUI Text | <img height="400"
alt="native_macos_static_text"
src="https://github.com/user-attachments/assets/becf7690-878e-4cf1-b9d7-49725d58fd42"
/> |
| **Static Text** | Chrome (Web) "p element" | <img height="400"
alt="chrome_web"
src="https://github.com/user-attachments/assets/bf38e1c0-7bd6-42b7-8230-71b8365ac1d7"
/> |
| **Static Text** | Firefox (Web) "p element" | <img height="400"
alt="firefox_web"
src="https://github.com/user-attachments/assets/54817628-690b-4243-8bb0-0d94afaf5013"
/> |
| **Static Text** | Safari (Web) "p element" | <img height="400"
alt="safari_web"
src="https://github.com/user-attachments/assets/08ae8a6e-8ea5-4cc5-84f8-49c5f759e910"
/> |
| **Text Field** | Native SwiftUI TextEditor | <img height="400"
alt="native_macos_texteditor"
src="https://github.com/user-attachments/assets/43995c72-acf5-4ef0-99d7-faa3940b16e7"
/> |
| **Text Field** | Native SwiftUI TextField | <img
alt="native_macos_textfield"
src="https://github.com/user-attachments/assets/d5606b23-dff0-47da-a1e8-b1c71047c426"
/> |

## 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 | <img height="400"
alt="flutter_before_text_field"
src="https://github.com/user-attachments/assets/014bfc9d-0bbe-49ee-9230-9da80addc675"
/> |
| **Static Text** | Flutter SelectableText | <img height="400"
alt="flutter_before_selectabletext"
src="https://github.com/user-attachments/assets/251956c6-4d7d-4d3e-802a-33718f30cbf3"
/> |

### 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 | <img height="400"
alt="flutter_after_chrome_selectabletext"
src="https://github.com/user-attachments/assets/167ee998-c9c4-4367-ab77-149514fb2b15"
/> |
| **Text Field** | Flutter TextField in Chrome | <img height="400"
alt="flutter_after_chrome_textfield"
src="https://github.com/user-attachments/assets/76b123df-c818-4304-afb8-7034506e2031"
/> |

### 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 | <img height="400"
alt="flutter_after_safari_textfield"
src="https://github.com/user-attachments/assets/c37e80cf-d89a-43aa-baff-f32e94f39b56"
/> |
| **Static Text** | Flutter SelectableText in Safari | <img height="400"
alt="flutter_after_safari_selectabletext"
src="https://github.com/user-attachments/assets/c1a11d76-afb9-4265-af54-e20e183839e1"
/> |

### 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 | <img
height="400" alt="flutter_after_native_selectabletext"
src="https://github.com/user-attachments/assets/5506eb4c-13ed-4c04-b680-9d097f20b159"
/> |
| **Text Field** | Flutter TextField on Native platforms | <img
height="400" alt="flutter_after_native_textfield"
src="https://github.com/user-attachments/assets/e65bba53-34d3-480c-9293-d597b587fe70"
/> |

Fixes #68675

## Pre-launch Checklist

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

---------

Co-authored-by: Renzo Olivares <roliv@google.com>