This change fixes a crash in `EditableText` that occurs when the text
editing value changes between two scrolls, when the second scroll ends
`_dataWhenToolbarShowScheduled` will be invalidated. If the second
scroll ends before the post frame callback scheduled by the first scroll
has a chance to execute, there will be a crash because
`_dataWhenToolbarShowScheduled` is being accessed while null.
This change also invalidates a scheduled toolbar if the text editing
value has changed before the post-frame callback has a chance to run.
Fixes#179164
## 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>
Original PR/Discussion: https://github.com/flutter/flutter/pull/172915
# Framework:
* `EditableText`/`SelectableText`, applies
`lineHeightScaleFactorOverride`, `wordSpacingOverride`, and
`letterSpacingOverride` to it's `TextStyle` similarly to how we already
do for bold platform overrides. Note `SelectableText` is built on
`EditableText` so it also applies these overrides.
* `Text`, applies `lineHeightScaleFactorOverride`,
`wordSpacingOverride`, and `letterSpacingOverride` to it's `TextStyle`
similarly to how we already do for bold platform overrides.
* Exposes line height override through
`MediaQueryData.lineHeightScaleFactorOverride` and
`maybeLineHeightScaleFactorOverrideOf(context)`.
* Exposes letter spacing override through
`MediaQueryData.letterSpacingOverride` and
`maybeLetterSpacingOverrideOf(context)`.
* Exposes word spacing override through
`MediaQueryData.wordSpacingOverride` and
`maybeWordSpacingOverrideOf(context)`.
* Exposes paragraph spacing override through
`MediaQueryData.paragraphSpacingOverride` and
`maybeParagraphSpacingOverrideOf(context)`.
* `MediaQuery.applyTextStyleOverrides()` \
`MediaQueryData.applyTextStyleOverrides()` to be able to reset/override
the text spacing settings on `MediaQueryData`.
# Engine:
* Introduces new members on `PlatformDispatcher` API that hold the text
spacing properties that are overridden on the web.
* We provide the `lineHeightScaleFactorOverride`,
`letterSpacingOverride`, `wordSpacingOverride`, and
`paragraphSpacingOverride` on the web by attaching a `ResizeObserver` to
an off-screen hidden element, when its size changes we capture its text
spacing CSS properties, and notify the framework through
`onMetricsChanged`.
Fixes#142712https://github.com/user-attachments/assets/aaaa3e74-c232-4956-acd2-ae1a4487e415
## 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>
## Description
This PR tweaks the selection logic added in
https://github.com/flutter/flutter/pull/157399.
Before this PR (and since
https://github.com/flutter/flutter/pull/157399) when the app resumed
while a TextField was selected the selection of the TextField is
maintained. This is the right behavior for the currently focused
TextField. But when there are several TextFields, after the app resumed
and the user move the focus to a another TextField, the behavior should
be to select all the content of the newly focused TextField. To achieve
this the `_justResumed`flag added in
https://github.com/flutter/flutter/pull/157399 should be reset as soon
as the focus move as it is needed only for the current focused TextField
to restore its selection just after the app resumed.
## Related Issue
Fixes [Pressing tab does select all content when app is resumed for
TextFields which were not
focused](https://github.com/flutter/flutter/issues/177650)
## Tests
- Adds 1 test
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>
This PR adds support for Home and End keyboard shortcuts on Android. It
seems like we had mistakenly purposely disabled them on Android before
(or maybe native Android recently added support for them?).
In the process I also noticed that Linux was missing home/end+control
shortcuts, so I added them. I confirmed that these are supported
natively using my Linux machine.
Fixes https://github.com/flutter/flutter/issues/168183
Fixes#25553
On iOS single-line TextFields are not scrollable with user input, for
example a pan gesture to move the viewport. They can still be scrolled
when the user drags the selection handles. Scrolling remains the same
for multi-line TextFields. A user can override this by providing
CupertinoTextField/TextField/EditableText with a custom `scrollPhysics`.
## 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>
## Description
This PR fixes a focus traversal issue for read-only TextField on macOS.
# Implementation details
On macOS, some editing capabilities are handled differently compared to
other platforms.
Since https://github.com/flutter/flutter/pull/105407, the macOS engine
send editing selectors to the framework.
To do so a text input connection should be opened.
Before this PR there was no text input connection for a read-only
EditableText which means several shortcut were not handled, especially
tab traversal (but also selection shortcuts using arrows).
After this PR an input connection is always created on macOS even if an
EditableText is read-only.
## Related Issue
Fixes [Read-only TextField prevents focus from
changing](https://github.com/flutter/flutter/issues/161482)
## Tests
Adds 1 test.
This auto-formats all *.dart files in the repository outside of the
`engine` subdirectory and enforces that these files stay formatted with
a presubmit check.
**Reviewers:** Please carefully review all the commits except for the
one titled "formatted". The "formatted" commit was auto-generated by
running `dev/tools/format.sh -a -f`. The other commits were hand-crafted
to prepare the repo for the formatting change. I recommend reviewing the
commits one-by-one via the "Commits" tab and avoiding Github's "Files
changed" tab as it will likely slow down your browser because of the
size of this PR.
---------
Co-authored-by: Kate Lovett <katelovett@google.com>
Co-authored-by: LongCatIsLooong <31859944+LongCatIsLooong@users.noreply.github.com>
Previously, dragging to select with an Apple Pencil on an iPad
(Scribble) caused the context menu to rapidly hide and show. Sometimes
this even caused an assertion error when using SystemContextMenu due to
showing two context menus in one frame. After this PR, the flicker and
crash are gone.
The flicker happened on both the Flutter-rendered context menu and
SystemContextMenu, but the error only happened with SystemContextMenu
due to a safeguard that prevents two from showing at the same time.
The flickering is likely a regression caused by
https://github.com/flutter/flutter/pull/142463.
| Before this PR | After this PR |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/e35f36f5-350d-41fb-b878-ee7b7820699d"
/> | <video
src="https://github.com/user-attachments/assets/262cb8d3-6670-4765-ace8-2d9bf61ae112"
/> |
Flutter's behavior isn't perfect compared to native (below), but it's a
major improvement. If we want to match native, I think we might have to
mess with the engine and see why it's calling showToolbar so much. I
checked and scribbleInProgress is false during this selection gesture,
so we can't use that.
<details>
<summary>Scribble native video</summary>
https://github.com/user-attachments/assets/207e208a-ac36-4c9e-a8ed-9e90e6ef9e3a
</details>
Fixes https://github.com/flutter/flutter/issues/159259
Enables the Scribe feature, or Android stylus handwriting text input.
This PR only implements basic handwriting input. Other features will be
done in subsequent PRs:
* https://github.com/flutter/flutter/issues/155948
* https://github.com/flutter/flutter/issues/156018
I created and fixed issue about stylus hovering while working on this:
https://github.com/flutter/flutter/issues/148810
Original PR for iOS Scribble, the iOS version of this feature:
https://github.com/flutter/flutter/pull/75472
FYI @fbcouch
~~Depends on https://github.com/flutter/engine/pull/52943~~ (merged).
Fixes https://github.com/flutter/flutter/issues/115607
<details>
<summary>Example code I'm using to test this feature (but any TextField
works)</summary>
```dart
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
final FocusNode _focusNode3 = FocusNode();
final TextEditingController _controller3 = TextEditingController(
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Scribe demo'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 74.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
focusNode: _focusNode1,
autofocus: false,
),
TextField(
focusNode: _focusNode2,
),
TextField(
focusNode: _focusNode3,
minLines: 4,
maxLines: 4,
controller: _controller3,
),
TextButton(
onPressed: () {
_focusNode1.unfocus();
_focusNode2.unfocus();
_focusNode3.unfocus();
},
child: const Text('Unfocus'),
),
TextButton(
onPressed: () {
_focusNode1.requestFocus();
SchedulerBinding.instance.addPostFrameCallback((Duration _) {
SystemChannels.textInput.invokeMethod('TextInput.hide');
});
},
child: const Text('Focus 1'),
),
],
),
),
),
);
}
}
```
</details>
---------
Co-authored-by: Nate Wilson <nate.w5687@gmail.com>
## Description
Relands https://github.com/flutter/flutter/pull/156968 wich was reverted in https://github.com/flutter/flutter/pull/157378
This PR makes `EditableText` aware of the lifecycle 'resumed' state to let the current selection unchanged when the application is resumed (on web and desktop, 'resumed' means the Flutter app window regained focus).
Before this PR, on web and desktop, the whole content of a `TextField` was selected whenever a `TextField` gained focus. This is the correct behavior when tabbing between fields but it is not when a field regains focus after the application is resumed
## Related Issue
Fixes [When switching to another browser tab or window and then going back, all text on TextField is selected automatically](https://github.com/flutter/flutter/issues/156078).
## Tests
Adds 1 test.
Reverts: flutter/flutter#156968
Initiated by: jacobsimionato
Reason for reverting: Google3 roll failing - see b/375019489
Original PR Author: bleroux
Reviewed By: {justinmc, gspencergoog}
This change reverts the following previous change:
## Description
This PR makes `EditableText` aware of the lifecycle 'resumed' state to let the current selection unchanged when the application is resumed (on web and desktop, 'resumed' means the Flutter app window regained focus).
Before this PR, on web and desktop, the whole content of a `TextField` was selected whenever a `TextField` gained focus. This is the correct behavior when tabbing between fields but it is not when a field regains focus after the application is resumed
## Related Issue
Fixes [When switching to another browser tab or window and then going back, all text on TextField is selected automatically](https://github.com/flutter/flutter/issues/156078).
## Tests
Adds 1 test.
## Description
This PR makes `EditableText` aware of the lifecycle 'resumed' state to let the current selection unchanged when the application is resumed (on web and desktop, 'resumed' means the Flutter app window regained focus).
Before this PR, on web and desktop, the whole content of a `TextField` was selected whenever a `TextField` gained focus. This is the correct behavior when tabbing between fields but it is not when a field regains focus after the application is resumed
## Related Issue
Fixes to [When switching to another browser tab or window and then going back, all text on TextField is selected automatically](https://github.com/flutter/flutter/issues/156078).
## Tests
To be done
This PR adds `TapOutsideConfiguration` where you can define a custom default logic for `onTapOutside`.
```dart
TapOutsideConfiguration(
behavior: AlwaysUnfocusTapOutsideBehavior(),
// behavior: const NeverUnfocusTapOutsideBehavior(),
// behavior: const CustomTapOutsideBehavior(),
child: Column(
children: [
// This TextField will use onTapOutside from TapOutsideConfiguration
TextField(),
// Of course you can still define onTapOutside
TextField(onTapOutside: (event) => print('Tapped outside')),
],
),
)
```
Custom logic can be define like this:
```dart
class CustomTapOutsideBehavior extends TapOutsideBehavior {
const CustomTapOutsideBehavior();
@override
void defaultOnTapOutside(PointerDownEvent event, FocusNode focusNode) {
// any custom logic here
}
}
```
This PR implements also two simple `AlwaysUnfocusTapOutsideBehavior` and `NeverUnfocusTapOutsideBehavior`.
Resolves#150123
## Description
This PR fixes the default selection on desktop when a text field is gaining focus.
Before this PR, when a text field is focused, the selection was collapsed at the end for all platforms except on Web where the entire content was selected.
After this PR, when a text field is focused, the entire content is selected on desktop and Web, and the selection is collapsed at the end on mobile platforms.
The implementation extends the work done in https://github.com/flutter/flutter/pull/119583 which implemented this feature for web.
## Related Issue
Fixes https://github.com/flutter/flutter/issues/150339.
## Tests
Updates 1 test.
Fixes 2 tests.
Fixes https://github.com/flutter/flutter/issues/154156
Some iOS keyboard implementations change the selection in the text field if dismissed with active composing regions. The framework should not call `requestKeyboard` in such cases since that would bring up the keyboard again.
In general the `TextInput.show` call is not needed for selection only changes. For working around https://github.com/flutter/flutter/issues/68571 the show call is needed only if we restarted the input on Android (and we don't restart on selection-only changes any way).
Fixes#153003
Pressing backspace on CJK keyboards to delete text may trigger a key event which in turns triggers the `DeleteTextIntent`. This is different than English keyboards where the updated `TextEditingValue` from the `TextInputPlugin` will come through `updateEditingValue` which allows us to hit the codepath that hides the text selection toolbar. 23883b13d4/packages/flutter/lib/src/widgets/editable_text.dart (L3245-L3250) Because CJK keyboards may not hit this codepath, when the text is long and editable text tries to bring the new selection into view by scrolling, this triggers the hide context menu scroll listener in a weird state 23883b13d4/packages/flutter/lib/src/widgets/editable_text.dart (L3865-L3869) causing an exception to be thrown.
This PR tries to work around the issue above by hiding the toolbar when a `DeleteTextIntent` is received.
Fixes bugs in the text selection positioning calculations so that they work even when the field is scaled. In many cases, we were simply translating things around without applying the proper localToGlobal (or vice versa) transform.
| Before | After |
| --- | --- |
| <img src="https://github.com/flutter/flutter/assets/389558/a5a45472-98c5-4cdf-b382-218971fd9404" /> | <img src="https://github.com/flutter/flutter/assets/389558/f396a1af-2546-4e38-a9d9-6c6edfa38d94" /> |
Partial fix for: https://github.com/flutter/flutter/issues/144685
It looks like there are other problems where transforms aren't applied properly. Putting a transform at the root of the application, above MaterialApp, will expose more problems.
<details>
<summary>Sample code</summary>
```dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(const _App());
class _App extends StatelessWidget {
const _App();
@override
Widget build(BuildContext context) {
return const MaterialApp(home: _Home());
}
}
class _Home extends StatefulWidget {
const _Home();
@override
State<_Home> createState() => _HomeState();
}
class _HomeState extends State<_Home> {
final _controller = WebViewController();
final TextEditingController textEditingController = TextEditingController(
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
);
final OverlayPortalController overlayPortalController = OverlayPortalController();
@override
void initState() {
super.initState();
_controller
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.https('api.flutter.dev'));
}
@override
Widget build(BuildContext context) {
overlayPortalController.show();
return Scaffold(
appBar: AppBar(
title: const Text('Scaled WebView Tester'),
),
body: Stack(
children: <Widget>[
Transform.scale(
alignment: Alignment.topLeft,
scale: 0.5,
child: TextField(
controller: textEditingController,
maxLines: null,
),
),
OverlayPortal(
controller: overlayPortalController,
overlayChildBuilder: (BuildContext context) {
return Positioned(
top: 0.0,
left: 0.0,
child: SizedBox(
height: 1000,
width: 1000,
child: Stack(
children: <Widget>[
Positioned(
top: 90.0,
left: 0.0,
child: Container(
height: 1.0,
width: 1000,
color: Colors.blue,
),
),
Positioned(
top: 102.0,
left: 0.0,
child: Container(
height: 1.0,
width: 1000,
color: Colors.blue,
),
),
],
),
),
);
},
),
],
),
);
}
}
```
</details>
In order for text fields to work correctly in multi-view on the web, we need to have the `viewId` information sent to the engine (`TextInput.setClient`). And while the text field is active, if it somehow moves to a new `View`, we need to inform the engine about such change (`TextInput.updateConfig`).
Engine PR: https://github.com/flutter/engine/pull/51099
Fixes https://github.com/flutter/flutter/issues/137344
