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

[webview_flutter] put webview with transparent background #1336

Closed
wants to merge 1 commit into from
Closed

[webview_flutter] put webview with transparent background #1336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...ew_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/InputAwareWebView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ final class InputAwareWebView extends WebView {
InputAwareWebView(Context context, View containerView) {
super(context);
this.containerView = containerView;
setBackgroundColor(0x00000000);
}

void setContainerView(View containerView) {
Expand Down
7 changes: 4 additions & 3 deletions packages/webview_flutter/example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MaterialApp(home: WebViewExample()));

const String kNavigationExamplePage = '''
<!DOCTYPE html><html>
<!DOCTYPE html><html style="background-color:transparent;">
<head><title>Navigation Delegate Example</title></head>
<body>
<body style="background-color:transparent;">
<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>
Expand All @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions packages/webview_flutter/ios/Classes/FlutterWebView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ - (instancetype)initWithFrame:(CGRect)frame
inConfiguration:configuration];

_webView = [[FLTWKWebView alloc] initWithFrame:frame configuration:configuration];
_webView.opaque = NO;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a performance penalty for doing this? should we only do this if the developer asked?

@chinmaygarde do you happen to know?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't find any performance penalty information by playing with this parameter on my side

_webView.backgroundColor = UIColor.clearColor;
_webView.scrollView.backgroundColor = UIColor.clearColor;

_navigationDelegate = [[FLTWKNavigationDelegate alloc] initWithChannel:_channel];
_webView.UIDelegate = self;
_webView.navigationDelegate = _navigationDelegate;
Expand Down