With HCPP enabled, an Android native EditText embedded as a Flutter platform view does not appear to let the Android text magnifier sample the final Flutter-composited scene when the native EditText background is transparent.
The visual result on screen is:
- Flutter draws a colored background behind the platform view.
- The native
EditText has a transparent background.
- The user sees native text over the Flutter background.
However, when using the Android text magnifier, the loupe does not show that same final composed result. It appears to sample only the native platform-view surface. With a transparent native background, the loupe loses the Flutter background behind the platform view. With an opaque native background, the text itself is magnified, but at the edge of the native view the loupe still shows only the native surface instead of including the Flutter content behind or around the platform view.
I reproduced this on Flutter 3.44.1 on a Pixel 7. The repro displays and logs surfaceControlEnabled=true, so HCPP/SurfaceControl is active.
Repro
Minimal repro project: https://github.com/saibotma/hcpp_edit_text_loupe_repro
The repro embeds native Android EditText views using PlatformViewsService.initHybridAndroidView(...) and enables HCPP through Android manifest metadata:
<meta-data
android:name="io.flutter.embedding.android.EnableHcpp"
android:value="true" />
The app shows two native EditText platform views over the same purple Flutter background:
- an
EditText with setBackgroundColor(Color.TRANSPARENT)
- an
EditText with setBackgroundColor(Color.WHITE)
Both views use the same platform-view path. The transparent case visually shows the purple Flutter background behind the text, but the magnifier does not show that composed background correctly. The opaque case demonstrates the same composition issue at the native view edge: the loupe magnifies the native text and white native background, but it does not include the purple Flutter background behind or around the platform view.
Screenshots
| Transparent native background |
Opaque native background |
Opaque native background at the view edge |
| The magnifier over the top native text field does not show the composed Flutter background correctly. |
The magnifier over the bottom native text field can magnify native text and native background pixels. |
The composition bug is visible at the top edge: the loupe shows only the native text field surface/background and does not include the Flutter background behind or around the platform view. |
|
|
|
Steps to reproduce
-
Run the repro on an HCPP-capable Android device.
flutter run --profile --enable-impeller --enable-hcpp
-
Confirm that the app displays or logs:
surfaceControlEnabled=true
-
Long-press, drag the cursor, or select text inside the transparent native EditText.
-
Observe the Android text magnifier.
-
Repeat in the opaque native EditText.
Expected result
The Android text magnifier should show what the user sees at that screen location: native EditText text over the final Flutter-composited background. For a transparent native platform view, that should include the Flutter content behind the native view.
Actual result
The magnifier appears to sample only the native platform-view surface:
- transparent native background: the Flutter background behind the native view is missing from the magnifier
- opaque native background: at the native view edge, the magnifier shows only the opaque native surface and does not include the Flutter background behind or around the platform view
Why this matters
I am trying to use native Android text fields because Flutter TextField still has Android text-selection usability gaps that are important in text-heavy apps such as chat or document editing.
For example:
Native Android text fields provide native selection handles, magnifier behavior, context menu behavior, IME integration, and system gesture behavior. Some of these details seem difficult to match in Flutter without either diverging from native Android look and feel or reimplementing large parts of Android text editing behavior.
Because of that, a reliable native EditText platform-view path is still important even if Flutter TextField continues improving.
Related issues
Environment
- Flutter 3.44.1
- Device tested: Pixel 7
- Android 16
With HCPP enabled, an Android native
EditTextembedded as a Flutter platform view does not appear to let the Android text magnifier sample the final Flutter-composited scene when the nativeEditTextbackground is transparent.The visual result on screen is:
EditTexthas a transparent background.However, when using the Android text magnifier, the loupe does not show that same final composed result. It appears to sample only the native platform-view surface. With a transparent native background, the loupe loses the Flutter background behind the platform view. With an opaque native background, the text itself is magnified, but at the edge of the native view the loupe still shows only the native surface instead of including the Flutter content behind or around the platform view.
I reproduced this on Flutter 3.44.1 on a Pixel 7. The repro displays and logs
surfaceControlEnabled=true, so HCPP/SurfaceControl is active.Repro
Minimal repro project: https://github.com/saibotma/hcpp_edit_text_loupe_repro
The repro embeds native Android
EditTextviews usingPlatformViewsService.initHybridAndroidView(...)and enables HCPP through Android manifest metadata:The app shows two native
EditTextplatform views over the same purple Flutter background:EditTextwithsetBackgroundColor(Color.TRANSPARENT)EditTextwithsetBackgroundColor(Color.WHITE)Both views use the same platform-view path. The transparent case visually shows the purple Flutter background behind the text, but the magnifier does not show that composed background correctly. The opaque case demonstrates the same composition issue at the native view edge: the loupe magnifies the native text and white native background, but it does not include the purple Flutter background behind or around the platform view.
Screenshots
Steps to reproduce
Run the repro on an HCPP-capable Android device.
Confirm that the app displays or logs:
Long-press, drag the cursor, or select text inside the transparent native
EditText.Observe the Android text magnifier.
Repeat in the opaque native
EditText.Expected result
The Android text magnifier should show what the user sees at that screen location: native
EditTexttext over the final Flutter-composited background. For a transparent native platform view, that should include the Flutter content behind the native view.Actual result
The magnifier appears to sample only the native platform-view surface:
Why this matters
I am trying to use native Android text fields because Flutter
TextFieldstill has Android text-selection usability gaps that are important in text-heavy apps such as chat or document editing.For example:
Native Android text fields provide native selection handles, magnifier behavior, context menu behavior, IME integration, and system gesture behavior. Some of these details seem difficult to match in Flutter without either diverging from native Android look and feel or reimplementing large parts of Android text editing behavior.
Because of that, a reliable native
EditTextplatform-view path is still important even if FlutterTextFieldcontinues improving.Related issues
Environment