[webview] add option to set the background to transparent

flutter · Jul 24, 2020 · 69b5562 · 69b5562
1 parent 7d4a918
commit 69b5562
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 3 deletions.
diff --git a/...bview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java b/...bview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java
@@ -42,7 +42,8 @@ public class FlutterWebView implements PlatformView, MethodCallHandler {
     DisplayManager displayManager =
         (DisplayManager) context.getSystemService(Context.DISPLAY_SERVICE);
     displayListenerProxy.onPreWebViewInitialization(displayManager);
-    webView = new InputAwareWebView(context, containerView);
+    boolean opaque = (boolean) params.get("opaque");
+    webView = new InputAwareWebView(context, containerView, opaque);
     displayListenerProxy.onPostWebViewInitialization(displayManager);
 
     platformThreadHandler = new Handler(context.getMainLooper());

diff --git a/...ew_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java b/...ew_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java
@@ -31,9 +31,12 @@ final class InputAwareWebView extends WebView {
   private ThreadedInputConnectionProxyAdapterView proxyAdapterView;
   private View containerView;
 
-  InputAwareWebView(Context context, View containerView) {
+  InputAwareWebView(Context context, View containerView, boolean opaque) {
     super(context);
     this.containerView = containerView;
+    if (!opaque) {
+      setBackgroundColor(0x00000000);
+    }
   }
 
   void setContainerView(View containerView) {

diff --git a/packages/webview_flutter/example/lib/main.dart b/packages/webview_flutter/example/lib/main.dart
@@ -16,7 +16,7 @@ const String kNavigationExamplePage = '''
 <head><title>Navigation Delegate Example</title></head>
 <body>
 <p>
-The navigation delegate is set to block navigation to the youtube website.
+The navigation delegate is set to block navigation to the youtube website, and as the webview background is transparent, you can see scaffold background.
 </p>
 <ul>
 <ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
@@ -38,6 +38,7 @@ class _WebViewExampleState extends State<WebViewExample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: Colors.green,
       appBar: AppBar(
         title: const Text('Flutter WebView example'),
         // This drop down menu demonstrates that Flutter widgets can be shown over the web view.
@@ -75,6 +76,7 @@ class _WebViewExampleState extends State<WebViewExample> {
             print('Page finished loading: $url');
           },
           gestureNavigationEnabled: true,
+          opaque: false,
         );
       }),
       floatingActionButton: favoriteButton(),

diff --git a/packages/webview_flutter/ios/Classes/FlutterWebView.m b/packages/webview_flutter/ios/Classes/FlutterWebView.m
@@ -92,6 +92,11 @@ - (instancetype)initWithFrame:(CGRect)frame
                         inConfiguration:configuration];
 
     _webView = [[FLTWKWebView alloc] initWithFrame:frame configuration:configuration];
+    if (![args[@"opaque"] boolValue]) {
+      _webView.opaque = NO;
+      _webView.backgroundColor = UIColor.clearColor;
+      _webView.scrollView.backgroundColor = UIColor.clearColor;
+    }
     _navigationDelegate = [[FLTWKNavigationDelegate alloc] initWithChannel:_channel];
     _webView.UIDelegate = self;
     _webView.navigationDelegate = _navigationDelegate;

diff --git a/packages/webview_flutter/lib/platform_interface.dart b/packages/webview_flutter/lib/platform_interface.dart
@@ -432,6 +432,7 @@ class CreationParams {
     this.userAgent,
     this.autoMediaPlaybackPolicy =
         AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
+    this.opaque,
   }) : assert(autoMediaPlaybackPolicy != null);
 
   /// The initialUrl to load in the webview.
@@ -465,6 +466,9 @@ class CreationParams {
   /// Which restrictions apply on automatic media playback.
   final AutoMediaPlaybackPolicy autoMediaPlaybackPolicy;
 
+  /// If set to `false`, the webview background will be transparent.
+  final bool opaque;
+
   @override
   String toString() {
     return '$runtimeType(initialUrl: $initialUrl, settings: $webSettings, javascriptChannelNames: $javascriptChannelNames, UserAgent: $userAgent)';

diff --git a/packages/webview_flutter/lib/src/webview_method_channel.dart b/packages/webview_flutter/lib/src/webview_method_channel.dart
@@ -197,6 +197,7 @@ class MethodChannelWebViewPlatform implements WebViewPlatformController {
       'javascriptChannelNames': creationParams.javascriptChannelNames.toList(),
       'userAgent': creationParams.userAgent,
       'autoMediaPlaybackPolicy': creationParams.autoMediaPlaybackPolicy.index,
+      'opaque': creationParams.opaque,
     };
   }
 }
diff --git a/packages/webview_flutter/lib/webview_flutter.dart b/packages/webview_flutter/lib/webview_flutter.dart
@@ -156,6 +156,7 @@ class WebView extends StatefulWidget {
     this.userAgent,
     this.initialMediaPlaybackPolicy =
         AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
+    this.opaque = true,
   })  : assert(javascriptMode != null),
         assert(initialMediaPlaybackPolicy != null),
         super(key: key);
@@ -329,6 +330,9 @@ class WebView extends StatefulWidget {
   /// The default policy is [AutoMediaPlaybackPolicy.require_user_action_for_all_media_types].
   final AutoMediaPlaybackPolicy initialMediaPlaybackPolicy;
 
+  /// If set to `false`, the webview background will be transparent.
+  final bool opaque;
+
   @override
   State<StatefulWidget> createState() => _WebViewState();
 }
@@ -393,6 +397,7 @@ CreationParams _creationParamsfromWidget(WebView widget) {
     javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),
     userAgent: widget.userAgent,
     autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,
+    opaque: widget.opaque,
   );
 }