Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

Commit 0c5357f

Browse files
e-adriene-adrien
authored
[webview_flutter] Add a backgroundColor option to the webview (#4584)
1 parent 7d9cc84 commit 0c5357f

File tree

5 files changed

+82
-4
lines changed

5 files changed

+82
-4
lines changed

‎packages/webview_flutter/webview_flutter/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 2.5.0
2+
3+
* Adds an option to set the background color of the webview.
4+
15
## 2.4.0
26

37
* Adds support for the `loadFile` and `loadHtmlString` methods.

‎packages/webview_flutter/webview_flutter/example/lib/main.dart

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,27 @@ const String kLocalExamplePage = '''
4848
</html>
4949
''';
5050

51+
const String kTransparentBackgroundPage = '''
52+
<!DOCTYPE html>
53+
<html>
54+
<head>
55+
<title>Transparent background test</title>
56+
</head>
57+
<style type="text/css">
58+
body { background: transparent; margin: 0; padding: 0; }
59+
#container { position: relative; margin: 0; padding: 0; width: 100vw; height: 100vh; }
60+
#shape { background: red; width: 200px; height: 200px; margin: 0; padding: 0; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); }
61+
p { text-align: center; }
62+
</style>
63+
<body>
64+
<div id="container">
65+
<p>Transparent background test</p>
66+
<div id="shape"></div>
67+
</div>
68+
</body>
69+
</html>
70+
''';
71+
5172
class WebViewExample extends StatefulWidget {
5273
@override
5374
_WebViewExampleState createState() => _WebViewExampleState();
@@ -68,6 +89,7 @@ class _WebViewExampleState extends State<WebViewExample> {
6889
@override
6990
Widget build(BuildContext context) {
7091
return Scaffold(
92+
backgroundColor: Colors.green,
7193
appBar: AppBar(
7294
title: const Text('Flutter WebView example'),
7395
// This drop down menu demonstrates that Flutter widgets can be shown over the web view.
@@ -106,6 +128,7 @@ class _WebViewExampleState extends State<WebViewExample> {
106128
print('Page finished loading: $url');
107129
},
108130
gestureNavigationEnabled: true,
131+
backgroundColor: const Color(0x00000000),
109132
);
110133
}),
111134
floatingActionButton: favoriteButton(),
@@ -155,6 +178,7 @@ enum MenuOptions {
155178
navigationDelegate,
156179
loadLocalFile,
157180
loadHtmlString,
181+
transparentBackground,
158182
}
159183

160184
class SampleMenu extends StatelessWidget {
@@ -170,6 +194,7 @@ class SampleMenu extends StatelessWidget {
170194
builder:
171195
(BuildContext context, AsyncSnapshot<WebViewController> controller) {
172196
return PopupMenuButton<MenuOptions>(
197+
key: const ValueKey<String>('ShowPopupMenu'),
173198
onSelected: (MenuOptions value) {
174199
switch (value) {
175200
case MenuOptions.showUserAgent:
@@ -199,6 +224,9 @@ class SampleMenu extends StatelessWidget {
199224
case MenuOptions.loadHtmlString:
200225
_onLoadHtmlStringExample(controller.data!, context);
201226
break;
227+
case MenuOptions.transparentBackground:
228+
_onTransparentBackground(controller.data!, context);
229+
break;
202230
}
203231
},
204232
itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
@@ -239,6 +267,11 @@ class SampleMenu extends StatelessWidget {
239267
value: MenuOptions.loadLocalFile,
240268
child: Text('Load local file'),
241269
),
270+
const PopupMenuItem<MenuOptions>(
271+
key: ValueKey<String>('ShowTransparentBackgroundExample'),
272+
value: MenuOptions.transparentBackground,
273+
child: Text('Transparent background example'),
274+
),
242275
],
243276
);
244277
},
@@ -327,6 +360,11 @@ class SampleMenu extends StatelessWidget {
327360
await controller.loadHtmlString(kLocalExamplePage);
328361
}
329362

363+
Future<void> _onTransparentBackground(
364+
WebViewController controller, BuildContext context) async {
365+
await controller.loadHtmlString(kTransparentBackgroundPage);
366+
}
367+
330368
Widget _getCookieList(String cookies) {
331369
if (cookies == null || cookies == '""') {
332370
return Container();

‎packages/webview_flutter/webview_flutter/lib/src/webview.dart

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ class WebView extends StatefulWidget {
9494
this.initialMediaPlaybackPolicy =
9595
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
9696
this.allowsInlineMediaPlayback = false,
97+
this.backgroundColor,
9798
}) : assert(javascriptMode != null),
9899
assert(initialMediaPlaybackPolicy != null),
99100
assert(allowsInlineMediaPlayback != null),
@@ -286,6 +287,12 @@ class WebView extends StatefulWidget {
286287
/// The default policy is [AutoMediaPlaybackPolicy.require_user_action_for_all_media_types].
287288
final AutoMediaPlaybackPolicy initialMediaPlaybackPolicy;
288289

290+
/// The background color of the [WebView].
291+
///
292+
/// When `null` the platform's webview default background color is used. By
293+
/// default [backgroundColor] is `null`.
294+
final Color? backgroundColor;
295+
289296
@override
290297
State<StatefulWidget> createState() => _WebViewState();
291298
}
@@ -357,6 +364,7 @@ CreationParams _creationParamsfromWidget(WebView widget) {
357364
javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),
358365
userAgent: widget.userAgent,
359366
autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,
367+
backgroundColor: widget.backgroundColor,
360368
);
361369
}
362370

‎packages/webview_flutter/webview_flutter/pubspec.yaml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: webview_flutter
22
description: A Flutter plugin that provides a WebView widget on Android and iOS.
33
repository: https://github.com/flutter/plugins/tree/master/packages/webview_flutter/webview_flutter
44
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+webview%22
5-
version: 2.4.0
5+
version: 2.5.0
66

77
environment:
88
sdk: ">=2.14.0 <3.0.0"
@@ -19,9 +19,9 @@ flutter:
1919
dependencies:
2020
flutter:
2121
sdk: flutter
22-
webview_flutter_android: ^2.4.0
23-
webview_flutter_platform_interface: ^1.5.2
24-
webview_flutter_wkwebview: ^2.4.0
22+
webview_flutter_android: ^2.5.0
23+
webview_flutter_platform_interface: ^1.7.0
24+
webview_flutter_wkwebview: ^2.5.0
2525

2626
dev_dependencies:
2727
build_runner: ^2.1.5

‎packages/webview_flutter/webview_flutter/test/webview_flutter_test.dart

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1020,6 +1020,34 @@ void main() {
10201020
});
10211021
});
10221022

1023+
group('Background color', () {
1024+
testWidgets('Defaults to null', (WidgetTester tester) async {
1025+
await tester.pumpWidget(const WebView());
1026+
1027+
final CreationParams params = captureBuildArgs(
1028+
mockWebViewPlatform,
1029+
creationParams: true,
1030+
).single as CreationParams;
1031+
1032+
expect(params.backgroundColor, null);
1033+
});
1034+
1035+
testWidgets('Can be transparent', (WidgetTester tester) async {
1036+
const Color transparentColor = Color(0x00000000);
1037+
1038+
await tester.pumpWidget(const WebView(
1039+
backgroundColor: transparentColor,
1040+
));
1041+
1042+
final CreationParams params = captureBuildArgs(
1043+
mockWebViewPlatform,
1044+
creationParams: true,
1045+
).single as CreationParams;
1046+
1047+
expect(params.backgroundColor, transparentColor);
1048+
});
1049+
});
1050+
10231051
group('Custom platform implementation', () {
10241052
setUp(() {
10251053
WebView.platform = MyWebViewPlatform();

0 commit comments

Comments
 (0)