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

wants to merge 1 commit into from

Conversation

jaumard
Copy link
Contributor

@jaumard jaumard commented Mar 13, 2019

fix flutter/flutter#29300

to use it right now:

webview_flutter: #^0.3.4
    git:
      url: git://github.com/jaumard/plugins
      ref: feature/webview_transparency
      path: packages/webview_flutter

@jaumard jaumard force-pushed the feature/webview_transparency branch 2 times, most recently from e36da33 to fd82d71 Compare March 13, 2019 16:35
@nicbabchenko
Copy link

will it be merged soon?

amirh
amirh suggested changes Mar 30, 2019
View reviewed changes
Copy link
Contributor

@amirh amirh left a comment

Choose a reason for hiding this comment

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

Thanks for the contribution!
Left a few comments/questions.

Please also update the example app with a sample that shows this in action.

.../webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java Outdated
@@ -101,6 +103,7 @@ public void onMethodCall(MethodCall methodCall, Result result) {
private void loadUrl(MethodCall methodCall, Result result) {
String url = (String) methodCall.arguments;
webView.loadUrl(url);
webView.setBackgroundColor(Color.TRANSPARENT);
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need to do this after each loadUrl?

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 remember reading that if you don't on some device or iOS version you might have trouble... but I can't find back the source, maybe I dream it... I'll remove this

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In fact I just tested when update the example app and in fact the web view is not transparent even with this ! :( searching why if anyone have an idea...

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd guess that the VD hosting it needs to be made transparent as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

What is VD hosting ? I'm not familiar with that, on iOS side there no problem thing are not working the same in Android?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@amirh bump ^^ :) where do I look for this ?

Copy link
Contributor

Choose a reason for hiding this comment

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

Getting this to work may require changes to the platform views code in the engine, you can take a look here as a starting point: https://github.com/flutter/engine/blob/master/shell/platform/android/io/flutter/plugin/platform/PlatformViewsController.java

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks @amirh I'll try to take a look at this but I'm going deep into flutter with that lol let's see

.../webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java Outdated
@@ -28,6 +29,7 @@
@SuppressWarnings("unchecked")
FlutterWebView(Context context, BinaryMessenger messenger, int id, Map<String, Object> params) {
webView = new WebView(context);
webView.setBackgroundColor(Color.TRANSPARENT);
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm curious whether it works through the virtual display compositing...

packages/webview_flutter/ios/Classes/FlutterWebView.m
@@ -66,6 +66,10 @@ - (instancetype)initWithFrame:(CGRect)frame
configuration.userContentController = userContentController;

_webView = [[WKWebView 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

packages/webview_flutter/ios/Classes/FlutterWebView.m Outdated Show resolved Hide resolved
@jaumard jaumard force-pushed the feature/webview_transparency branch 3 times, most recently from c01c5b0 to dfb6d63 Compare March 30, 2019 08:14
@lzxb
Copy link

lzxb commented Mar 30, 2019

I've also had problems like yours.
Here's a video

https://github.com/lzxb/flutter-webview-black-screen/blob/master/black-screen.mp4

@lzxb
Copy link

lzxb commented Mar 30, 2019

Flutter webview plugin black screen

@pichillilorenzo pichillilorenzo mentioned this pull request Jun 1, 2019
Closed
@phamnhuvu-dev
Copy link

Transparent background is not working on Android

@IchordeDionysos
Copy link

Are there any updates on this? 🤔

@TheOneWithTheBraid
Copy link
Contributor

Anyone working on?

@amirh
Copy link
Contributor

amirh commented Jan 24, 2020

I believe this is possible on Android since flutter/engine#9849 not sure if we even need the setBackgroundColor.

We should probably remove the setBackground calls from everywhere but the constructor. We should also confirm whether the setBackground in the constructor is needed.

This will need a test before it can land.

cc @bparrishMines

@jaumard jaumard force-pushed the feature/webview_transparency branch from dfb6d63 to 968e4b1 Compare March 20, 2020 09:44
@jaumard jaumard force-pushed the feature/webview_transparency branch from 968e4b1 to 7255aeb Compare March 23, 2020 14:51
@jaumard
Copy link
Contributor Author

jaumard commented Mar 23, 2020

@bparrishMines @amirh should be ok now :)

@TheOneWithTheBraid
Copy link
Contributor

@amirh What's about this now? I seriously need this change for my katex_flutter package. I currently workaround this by using JS to change the HTML background after detecting the BuildContext's background. It would be great if you could merge this.

@crizant
Copy link

crizant commented Jul 13, 2020

Can't believe it's been a year. Please merge it if it's alright. ;(

@krispypen
Copy link

I'm also using the fork for some time... please merge 👍

bparrishMines
bparrishMines reviewed Jul 18, 2020
View reviewed changes
Copy link
Contributor

@bparrishMines bparrishMines left a comment

Choose a reason for hiding this comment

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

@jaumard As Amir stated in a comment, I believe we want the developer to have the option to make the background transparent and not have it as transparent by default.

Could we add this as a parameter in Webview and pass this as a creation parameter?

As for testing it should be sufficient to include this in the creation test.

@crizant
Copy link

crizant commented Jul 24, 2020

Since the original author didn't fix it for months, I decided to create another PR: #2895

@e-adrien e-adrien mentioned this pull request Jan 15, 2021
Merged
@stuartmorgan stuartmorgan added p: webview_flutter Edits files for a webview_flutter plugin and removed webview labels Jan 29, 2021
@stuartmorgan
Copy link
Contributor

Thank you for your contribution. I'm going to close this PR for now since there are outstanding comments, just to get this off our PR review queue. Please don't hesitate to submit a new PR (or follow up on #2895) if you have the time to address the review comments. Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@bparrishMines bparrishMines bparrishMines left review comments

@amirh amirh amirh requested changes

@real1900 real1900 real1900 approved these changes

Assignees
No one assigned
Labels
bugfix cla: yes p: webview_flutter Edits files for a webview_flutter plugin platform-android platform-ios
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[webview_flutter] Webview should have transparent background