diff --git a/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java b/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java
index bfb79a39e8ba..074f12be33d0 100644
--- a/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java
+++ b/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java
@@ -87,7 +87,8 @@ public boolean shouldOverrideUrlLoading(WebView view, String url) {
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/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java b/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java
index 9b81a5b7cc6b..87023affb371 100644
--- a/packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java
+++ b/packages/webview_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
index 7ec3008337d8..5cd50c028504 100644
--- a/packages/webview_flutter/example/lib/main.dart
+++ b/packages/webview_flutter/example/lib/main.dart
@@ -17,7 +17,7 @@ const String kNavigationExamplePage = '''
Navigation Delegate Example
-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.
@@ -45,6 +45,7 @@ class _WebViewExampleState extends State {
@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.
@@ -82,6 +83,7 @@ class _WebViewExampleState extends State {
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
index 969e010913f3..e4e2d21c4ec7 100644
--- 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
index 6c991b14a76e..3f0727a0b2b1 100644
--- 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
index 348b225bb257..f70d3d50da46 100644
--- 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
index 2fdf639180a7..9a20f0728f00 100644
--- a/packages/webview_flutter/lib/webview_flutter.dart
+++ b/packages/webview_flutter/lib/webview_flutter.dart
@@ -223,6 +223,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);
@@ -396,6 +397,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 createState() => _WebViewState();
}
@@ -460,6 +464,7 @@ CreationParams _creationParamsfromWidget(WebView widget) {
javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),
userAgent: widget.userAgent,
autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,
+ opaque: widget.opaque,
);
}