[webview_flutter] Add an option to set the background color of the webview (#3431)
diff --git a/packages/webview_flutter/webview_flutter/CHANGELOG.md b/packages/webview_flutter/webview_flutter/CHANGELOG.md
index 7b7e112..1f8a33d 100644
--- a/packages/webview_flutter/webview_flutter/CHANGELOG.md
+++ b/packages/webview_flutter/webview_flutter/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 2.5.0
+
+* Adds an option to set the background color of the webview.
+
## 2.4.0
* Adds support for the `loadFile` and `loadHtmlString` methods.
diff --git a/packages/webview_flutter/webview_flutter/example/lib/main.dart b/packages/webview_flutter/webview_flutter/example/lib/main.dart
index 5c05e8f..c870ae9 100644
--- a/packages/webview_flutter/webview_flutter/example/lib/main.dart
+++ b/packages/webview_flutter/webview_flutter/example/lib/main.dart
@@ -48,6 +48,27 @@
</html>
''';
+const String kTransparentBackgroundPage = '''
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>Transparent background test</title>
+ </head>
+ <style type="text/css">
+ body { background: transparent; margin: 0; padding: 0; }
+ #container { position: relative; margin: 0; padding: 0; width: 100vw; height: 100vh; }
+ #shape { background: red; width: 200px; height: 200px; margin: 0; padding: 0; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); }
+ p { text-align: center; }
+ </style>
+ <body>
+ <div id="container">
+ <p>Transparent background test</p>
+ <div id="shape"></div>
+ </div>
+ </body>
+ </html>
+''';
+
class WebViewExample extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
@@ -68,6 +89,7 @@
@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.
@@ -106,6 +128,7 @@
print('Page finished loading: $url');
},
gestureNavigationEnabled: true,
+ backgroundColor: const Color(0x00000000),
);
}),
floatingActionButton: favoriteButton(),
@@ -155,6 +178,7 @@
navigationDelegate,
loadLocalFile,
loadHtmlString,
+ transparentBackground,
}
class SampleMenu extends StatelessWidget {
@@ -170,6 +194,7 @@
builder:
(BuildContext context, AsyncSnapshot<WebViewController> controller) {
return PopupMenuButton<MenuOptions>(
+ key: const ValueKey<String>('ShowPopupMenu'),
onSelected: (MenuOptions value) {
switch (value) {
case MenuOptions.showUserAgent:
@@ -199,6 +224,9 @@
case MenuOptions.loadHtmlString:
_onLoadHtmlStringExample(controller.data!, context);
break;
+ case MenuOptions.transparentBackground:
+ _onTransparentBackground(controller.data!, context);
+ break;
}
},
itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
@@ -239,6 +267,11 @@
value: MenuOptions.loadLocalFile,
child: Text('Load local file'),
),
+ const PopupMenuItem<MenuOptions>(
+ key: ValueKey<String>('ShowTransparentBackgroundExample'),
+ value: MenuOptions.transparentBackground,
+ child: Text('Transparent background example'),
+ ),
],
);
},
@@ -327,6 +360,11 @@
await controller.loadHtmlString(kLocalExamplePage);
}
+ Future<void> _onTransparentBackground(
+ WebViewController controller, BuildContext context) async {
+ await controller.loadHtmlString(kTransparentBackgroundPage);
+ }
+
Widget _getCookieList(String cookies) {
if (cookies == null || cookies == '""') {
return Container();
diff --git a/packages/webview_flutter/webview_flutter/lib/src/webview.dart b/packages/webview_flutter/webview_flutter/lib/src/webview.dart
index eb6ee4e..b2cc690 100644
--- a/packages/webview_flutter/webview_flutter/lib/src/webview.dart
+++ b/packages/webview_flutter/webview_flutter/lib/src/webview.dart
@@ -94,6 +94,7 @@
this.initialMediaPlaybackPolicy =
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
this.allowsInlineMediaPlayback = false,
+ this.backgroundColor,
}) : assert(javascriptMode != null),
assert(initialMediaPlaybackPolicy != null),
assert(allowsInlineMediaPlayback != null),
@@ -286,6 +287,12 @@
/// The default policy is [AutoMediaPlaybackPolicy.require_user_action_for_all_media_types].
final AutoMediaPlaybackPolicy initialMediaPlaybackPolicy;
+ /// The background color of the [WebView].
+ ///
+ /// When `null` the platform's webview default background color is used. By
+ /// default [backgroundColor] is `null`.
+ final Color? backgroundColor;
+
@override
State<StatefulWidget> createState() => _WebViewState();
}
@@ -357,6 +364,7 @@
javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),
userAgent: widget.userAgent,
autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,
+ backgroundColor: widget.backgroundColor,
);
}
diff --git a/packages/webview_flutter/webview_flutter/pubspec.yaml b/packages/webview_flutter/webview_flutter/pubspec.yaml
index 82f790a..6c00f65 100644
--- a/packages/webview_flutter/webview_flutter/pubspec.yaml
+++ b/packages/webview_flutter/webview_flutter/pubspec.yaml
@@ -2,7 +2,7 @@
description: A Flutter plugin that provides a WebView widget on Android and iOS.
repository: https://github.com/flutter/plugins/tree/master/packages/webview_flutter/webview_flutter
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+webview%22
-version: 2.4.0
+version: 2.5.0
environment:
sdk: ">=2.14.0 <3.0.0"
@@ -19,9 +19,9 @@
dependencies:
flutter:
sdk: flutter
- webview_flutter_android: ^2.4.0
- webview_flutter_platform_interface: ^1.5.2
- webview_flutter_wkwebview: ^2.4.0
+ webview_flutter_android: ^2.5.0
+ webview_flutter_platform_interface: ^1.7.0
+ webview_flutter_wkwebview: ^2.5.0
dev_dependencies:
build_runner: ^2.1.5
diff --git a/packages/webview_flutter/webview_flutter/test/webview_flutter_test.dart b/packages/webview_flutter/webview_flutter/test/webview_flutter_test.dart
index b055302..da860f0 100644
--- a/packages/webview_flutter/webview_flutter/test/webview_flutter_test.dart
+++ b/packages/webview_flutter/webview_flutter/test/webview_flutter_test.dart
@@ -1020,6 +1020,34 @@
});
});
+ group('Background color', () {
+ testWidgets('Defaults to null', (WidgetTester tester) async {
+ await tester.pumpWidget(const WebView());
+
+ final CreationParams params = captureBuildArgs(
+ mockWebViewPlatform,
+ creationParams: true,
+ ).single as CreationParams;
+
+ expect(params.backgroundColor, null);
+ });
+
+ testWidgets('Can be transparent', (WidgetTester tester) async {
+ const Color transparentColor = Color(0x00000000);
+
+ await tester.pumpWidget(const WebView(
+ backgroundColor: transparentColor,
+ ));
+
+ final CreationParams params = captureBuildArgs(
+ mockWebViewPlatform,
+ creationParams: true,
+ ).single as CreationParams;
+
+ expect(params.backgroundColor, transparentColor);
+ });
+ });
+
group('Custom platform implementation', () {
setUp(() {
WebView.platform = MyWebViewPlatform();
