Merge pull request #462 from plateaukao/support_hybrid_composition_in_android

Use PlatformViewLink widget for Android WebView

README.md

@@ -545,6 +545,7 @@ Instead, on the `onLoadStop` WebView event, you can use `callHandler` directly:
 
 ##### `InAppWebView` Android-specific options
 
+* `useHybridComposition`: Set to `true` to use Flutter's new Hybrid Composition rendering method, which fixes all issues [here](https://github.com/flutter/flutter/issues/61133). The default value is `false`. Note that this option requires Flutter v1.20+ and should only be used on Android 10+ for release apps, as animations will drop frames on < Android 10.
 * `useShouldInterceptRequest`: Set to `true` to be able to listen at the `androidShouldInterceptRequest` event. The default value is `false`.
 * `useOnRenderProcessGone`: Set to `true` to be able to listen at the `androidOnRenderProcessGone` event. The default value is `false`.
 * `textZoom`: Sets the text zoom of the page in percent. The default value is `100`.

android/src/main/AndroidManifest.xml

@@ -5,6 +5,8 @@
         <activity android:theme="@style/AppTheme" android:name="com.pichillilorenzo.flutter_inappwebview.InAppBrowser.InAppBrowserActivity" android:configChanges="orientation|screenSize"></activity>
         <activity android:theme="@style/ThemeTransparent" android:name="com.pichillilorenzo.flutter_inappwebview.ChromeCustomTabs.ChromeCustomTabsActivity" android:configChanges="orientation|screenSize"></activity>
         <receiver android:name="com.pichillilorenzo.flutter_inappwebview.ChromeCustomTabs.ActionBroadcastReceiver" />
+        <meta-data
+            android:name="io.flutter.embedded_views_preview"
+            android:value="true" />
     </application>
-
 </manifest>

example/android/app/src/main/AndroidManifest.xml

@@ -85,5 +85,11 @@
                 android:resource="@xml/provider_paths"/>
         </provider>
 
+        <!-- Hybrid composition -->
+        <meta-data
+            android:name="io.flutter.embedded_views_preview"
+            android:value="true" />
+
+
     </application>
 </manifest>

lib/src/in_app_webview.dart

@@ -3,6 +3,7 @@ import 'dart:typed_data';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter/gestures.dart';
@@ -339,27 +340,42 @@ class _InAppWebViewState extends State<InAppWebView> {
   @override
   Widget build(BuildContext context) {
     if (defaultTargetPlatform == TargetPlatform.android) {
-      return AndroidView(
+      if (widget.initialOptions.android.useHybridComposition) {
-        viewType: 'com.pichillilorenzo/flutter_inappwebview',
+        return PlatformViewLink(
-        onPlatformViewCreated: _onPlatformViewCreated,
+          viewType: 'com.pichillilorenzo/flutter_inappwebview',
-        gestureRecognizers: widget.gestureRecognizers,
+          surfaceFactory: (
-        layoutDirection: TextDirection.rtl,
+              BuildContext context,
-        creationParams: <String, dynamic>{
+              PlatformViewController controller,
-          'initialUrl': '${Uri.parse(widget.initialUrl)}',
+              ) {
-          'initialFile': widget.initialFile,
+            return AndroidViewSurface(
-          'initialData': widget.initialData?.toMap(),
+              controller: controller,
-          'initialHeaders': widget.initialHeaders,
+              gestureRecognizers: widget.gestureRecognizers ?? const <Factory<OneSequenceGestureRecognizer>>{},
-          'initialOptions': widget.initialOptions?.toMap() ?? {},
+              hitTestBehavior: PlatformViewHitTestBehavior.opaque,
-          'contextMenu': widget.contextMenu?.toMap() ?? {},
+            );
-          'windowId': widget.windowId
+          },
-        },
+          onCreatePlatformView: (PlatformViewCreationParams params) {
-        creationParamsCodec: const StandardMessageCodec(),
+            return PlatformViewsService.initSurfaceAndroidView(
-      );
+              id: params.id,
-      // onLongPress issue: https://github.com/flutter/plugins/blob/f31d16a6ca0c4bd6849cff925a00b6823973696b/packages/webview_flutter/lib/src/webview_android.dart#L31
+              viewType: 'com.pichillilorenzo/flutter_inappwebview',
-      /*return GestureDetector(
+              layoutDirection: TextDirection.rtl,
-        onLongPress: () {},
+              creationParams: <String, dynamic>{
-        excludeFromSemantics: true,
+                'initialUrl': '${Uri.parse(widget.initialUrl)}',
-        child: AndroidView(
+                'initialFile': widget.initialFile,
+                'initialData': widget.initialData?.toMap(),
+                'initialHeaders': widget.initialHeaders,
+                'initialOptions': widget.initialOptions?.toMap() ?? {},
+                'contextMenu': widget.contextMenu?.toMap() ?? {},
+                'windowId': widget.windowId
+              },
+              creationParamsCodec: const StandardMessageCodec(),
+            )
+              ..addOnPlatformViewCreatedListener(params.onPlatformViewCreated)
+              ..addOnPlatformViewCreatedListener((id) => _onPlatformViewCreated(id))
+              ..create();
+          },
+        );
+      } else {
+        return AndroidView(
           viewType: 'com.pichillilorenzo/flutter_inappwebview',
           onPlatformViewCreated: _onPlatformViewCreated,
           gestureRecognizers: widget.gestureRecognizers,
@@ -369,11 +385,13 @@ class _InAppWebViewState extends State<InAppWebView> {
             'initialFile': widget.initialFile,
             'initialData': widget.initialData?.toMap(),
             'initialHeaders': widget.initialHeaders,
-            'initialOptions': initialOptions
+            'initialOptions': widget.initialOptions?.toMap() ?? {},
+            'contextMenu': widget.contextMenu?.toMap() ?? {},
+            'windowId': widget.windowId
           },
           creationParamsCodec: const StandardMessageCodec(),
-        ),
+        );
-      );*/
+      }
     } else if (defaultTargetPlatform == TargetPlatform.iOS) {
       return UiKitView(
         viewType: 'com.pichillilorenzo/flutter_inappwebview',

lib/src/webview_options.dart

@@ -470,6 +470,11 @@ class AndroidInAppWebViewOptions
   ///If the url request of a subframe matches the regular expression, then the request of that subframe is canceled.
   String regexToCancelSubFramesLoading;
 
+  ///Set to `true` to enable Flutter's new Hybrid Composition. The default value is `false`.
+  ///Hybrid Composition is supported starting with Flutter v1.20.
+  ///**NOTE**: It is recommended to use Hybrid Composition only on Android 10+ for a release app, as it can cause framerate drops on animations in Android 9 and lower.
+  bool useHybridComposition;
+
   ///Set to `true` to be able to listen at the [WebView.androidShouldInterceptRequest] event. The default value is `false`.
   bool useShouldInterceptRequest;
 
@@ -556,6 +561,7 @@ class AndroidInAppWebViewOptions
     this.initialScale = 0,
     this.supportMultipleWindows = false,
     this.regexToCancelSubFramesLoading,
+    this.useHybridComposition = false,
     this.useShouldInterceptRequest = false,
     this.useOnRenderProcessGone = false,
     this.overScrollMode = AndroidOverScrollMode.OVER_SCROLL_IF_CONTENT_SCROLLS,
@@ -613,6 +619,7 @@ class AndroidInAppWebViewOptions
       "thirdPartyCookiesEnabled": thirdPartyCookiesEnabled,
       "hardwareAcceleration": hardwareAcceleration,
       "supportMultipleWindows": supportMultipleWindows,
+      "useHybridComposition": useHybridComposition,
       "regexToCancelSubFramesLoading": regexToCancelSubFramesLoading,
       "useShouldInterceptRequest": useShouldInterceptRequest,
       "useOnRenderProcessGone": useOnRenderProcessGone,
@@ -676,6 +683,7 @@ class AndroidInAppWebViewOptions
     options.supportMultipleWindows = map["supportMultipleWindows"];
     options.regexToCancelSubFramesLoading =
         map["regexToCancelSubFramesLoading"];
+    options.useHybridComposition = map["useHybridComposition"];
     options.useShouldInterceptRequest = map["useShouldInterceptRequest"];
     options.useOnRenderProcessGone = map["useOnRenderProcessGone"];
     options.overScrollMode =