Skip to content

[platform-view][android]loupe doesn't work properly #121817

Description

@the-airbender

The magnify glass (loupe) in android app is showing a grey box instead of magnified text. The app launched on web in android chrome browser is working perfectly.

Tested it on Android API 31.

Expected Behaviour:

Whenever, we select or move cursor on text, the magify glass should display the magnified text ( Added in Android P)

Current Behaviour:

Gray shadow instead of magnified text as shown below:

android_webview_magifier_loupe.webm

### Steps to Reproduce:

  1. Add any url or html page to webview_flutter widget,
  2. Run the Android app, select or move cursor over text to get magnifier

webview_flutter & webview_flutter_android version

  webview_flutter: ^4.0.5
  webview_flutter_android: ^3.3.1
  webview_flutter_platform_interface: ^2.0.2

Android (build.gradle)

minSdkVersion 20
compileSdkVersion 33

Code Sample

The code sample is taken from the example, removed additional functionalities to keep it simple.

Code Sample
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';


void main() => runApp(const MaterialApp(home: WebViewExample()));

class WebViewExample extends StatefulWidget {
const WebViewExample({super.key});

@override
State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
late final WebViewController _controller;

@override
void initState() {
  super.initState();
  // #docregion platform_features
  late final PlatformWebViewControllerCreationParams params;
  if (WebViewPlatform.instance is WebKitWebViewPlatform) {
    params = WebKitWebViewControllerCreationParams(
      allowsInlineMediaPlayback: true,
      mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
    );
  } else {
    params = const PlatformWebViewControllerCreationParams();
  }

  final WebViewController controller =
  WebViewController.fromPlatformCreationParams(params);
  // #enddocregion platform_features
  controller
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..addJavaScriptChannel(
      'Toaster',
      onMessageReceived: (JavaScriptMessage message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(message.message)),
        );
      },
    )
    ..loadRequest(Uri.parse('https://flutter.dev'));

  // #docregion platform_features
  if (controller.platform is AndroidWebViewController) {
    AndroidWebViewController.enableDebugging(true);
    (controller.platform as AndroidWebViewController)
        .setMediaPlaybackRequiresUserGesture(false);
  }
  _controller = controller;
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.green,
    appBar: AppBar(
      title: const Text('Flutter WebView example'),
    ),
    body: WebViewWidget(controller: _controller),
  );
}
}

Flutter Doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.3, on macOS 13.0 22A380 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[!] Android Studio (version 2022.1)
    ✗ Unable to find bundled Java version.
[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

PS:
Magnify feature is working fine on web app, tested on chrome browser in android
(expecting the same on Android App)

web_magnifier_loupe.webm

Thanks!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: platform-viewsEmbedding Android/iOS views in Flutter appsc: new featureNothing broken; request for a new capabilityfound in release: 3.7Found to occur in 3.7found in release: 3.9Found to occur in 3.9has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyteam-androidOwned by Android platform teamtriaged-androidTriaged by Android platform team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions