From 2681f505dd8cd22fef97593354b4397b56ff9308 Mon Sep 17 00:00:00 2001 From: e-adrien Date: Tue, 7 Dec 2021 12:34:04 +0000 Subject: [PATCH] [webview_flutter] Add an option to set the background color of the webview (#3431) --- .../webview_flutter/CHANGELOG.md | 4 ++ .../webview_flutter/example/lib/main.dart | 38 +++++++++++++++++++ .../webview_flutter/lib/src/webview.dart | 8 ++++ .../webview_flutter/pubspec.yaml | 8 ++-- .../test/webview_flutter_test.dart | 28 ++++++++++++++ 5 files changed, 82 insertions(+), 4 deletions(-) diff --git a/packages/webview_flutter/webview_flutter/CHANGELOG.md b/packages/webview_flutter/webview_flutter/CHANGELOG.md index 7b7e112b39fd..1f8a33db4cb4 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 5c05e8f7de7d..c870ae9d829d 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 @@ const String kLocalExamplePage = ''' '''; +const String kTransparentBackgroundPage = ''' + + + + Transparent background test + + + +
+

Transparent background test

+
+
+ + +'''; + class WebViewExample extends StatefulWidget { @override _WebViewExampleState createState() => _WebViewExampleState(); @@ -68,6 +89,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. @@ -106,6 +128,7 @@ class _WebViewExampleState extends State { print('Page finished loading: $url'); }, gestureNavigationEnabled: true, + backgroundColor: const Color(0x00000000), ); }), floatingActionButton: favoriteButton(), @@ -155,6 +178,7 @@ enum MenuOptions { navigationDelegate, loadLocalFile, loadHtmlString, + transparentBackground, } class SampleMenu extends StatelessWidget { @@ -170,6 +194,7 @@ class SampleMenu extends StatelessWidget { builder: (BuildContext context, AsyncSnapshot controller) { return PopupMenuButton( + key: const ValueKey('ShowPopupMenu'), onSelected: (MenuOptions value) { switch (value) { case MenuOptions.showUserAgent: @@ -199,6 +224,9 @@ class SampleMenu extends StatelessWidget { case MenuOptions.loadHtmlString: _onLoadHtmlStringExample(controller.data!, context); break; + case MenuOptions.transparentBackground: + _onTransparentBackground(controller.data!, context); + break; } }, itemBuilder: (BuildContext context) => >[ @@ -239,6 +267,11 @@ class SampleMenu extends StatelessWidget { value: MenuOptions.loadLocalFile, child: Text('Load local file'), ), + const PopupMenuItem( + key: ValueKey('ShowTransparentBackgroundExample'), + value: MenuOptions.transparentBackground, + child: Text('Transparent background example'), + ), ], ); }, @@ -327,6 +360,11 @@ class SampleMenu extends StatelessWidget { await controller.loadHtmlString(kLocalExamplePage); } + Future _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 eb6ee4e09dc2..b2cc69045e5f 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 @@ class WebView extends StatefulWidget { 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 @@ class WebView extends StatefulWidget { /// 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 createState() => _WebViewState(); } @@ -357,6 +364,7 @@ CreationParams _creationParamsfromWidget(WebView widget) { 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 82f790a74478..6c00f65d8022 100644 --- a/packages/webview_flutter/webview_flutter/pubspec.yaml +++ b/packages/webview_flutter/webview_flutter/pubspec.yaml @@ -2,7 +2,7 @@ name: webview_flutter 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 @@ flutter: 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 b05530272651..da860f0118d4 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 @@ void main() { }); }); + 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();