Flutter: Inline Android and iOS WebView

Adding an example use case for this:

I have a hybrid Android application where some rendering is handled by a WebView but controls for things like navigation are handled by native UI widgets. I would like to port a version to Flutter, off the top of my head the requirements for getting this to work are:

• A way to add a WebView into the rendered tree so that it can live along side native widgets for things like navigation buttons.
• A way to allow interaction with JS in the WebView (something like this).
• A way to intercept HTTP requests from the WebView.

The last item here allows us to stream the contents of PDF files to the WebView. The current Android implementation intercepts HTTP requests from the WebView and streams back the contents of the requested PDF file. The implementation can be seen here.

I'm new to Flutter so I may have gotten some of the terminology wrong, let me know if you need clarification on anything.

We're currently moving towards an approach of making it easier to use native views in conjunction with FlutterView:
https://docs.google.com/document/d/1DOfwpL6VojCAG_zjjcA_z5ekF7rTIohV8dWn2o7_IME/edit

This is more about having a way to put a WebView within a Flutter widget tree, I think. As you say in your original comment, we need something similar for embedding videos or maps provided by a third-party non-Flutter library.

Any updates on integrating a webview with flutter?

Looks like someone has started a plugin to do full screen webviews: https://github.com/dart-flitter/flutter_webview_plugin

I think doing the activity subset is a great start. It would unlock a whole set of app types that would need getting an oauth token from a web login.

FWIW: here's the PR for the iOS version of the webview plugin: https://github.com/dart-flitter/flutter_webview_plugin/pull/3

We now have the webview plugin on IOS thanks to @toufikzitouni 👍 https://pub.dartlang.org/packages/flutter_webview_plugin

This is not on our short-term priority list. Moving to next milestone.

It would be great to have a webview and a way to interacting with it. I want to show embedded YouTube video and to control the player. Right now I am using https://github.com/dart-flitter/flutter_webview_plugin, but I am using some hack for some situations. For example, I change the webview URL in JavaScript after the video ends in order to the flutter app to receive an event onUrlChange and then to close the webview.

@csbenjamin Are you specifically looking for YouTube you prefer https://developers.google.com/youtube/android/player/ over a WebView to control? Or did you also need a WebView? If you're looking for a YouTube specific player, please file a new bug, that's definitely a reasonable request. :)

Yes, I am looking for YouTube player. I don't need anything from webview, just a YouTube player. I will open a new issue. Thanks

We have to open payment web form and this feature is blocker for us 😢

@megatolya the webview plugin cannot do the job for you ?

@lejard-h
Unfortunately no. We need to have oppurtunity to render web forms in any place on the page. Not only on top of other content or on the separate page. Manually control scroll (to reposition webview) seems too complicated for us.

I understand that this issue is by-design problem but IMHO this feature is quite fundamental to ignore.

This is definitely something we intend to do and we agree that it is critical for many use cases.

Sadly this issue would also be a blocker for us to consider Flutter as we also have a similar use case to what @jxson mentioned above, and what Basecamp blogged about here:
https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture-afc071589c25

Using Flutter on its own to write once and deploy to both mobile platforms is already a win. But we want to go a step further and bring all of our web features in a hybrid app with enough native components to make the whole experience feels as close to native as possible, without the constant need to keep up with the new features that we introduce on our web version.

Anything that can be shared about the roadmap in relationship to this issue would be really helpful.

We're working on some code changes now which we expect may make inline WebViews work with Flutter on iOS. Inline WebViews in FlutterViews on Android are a bit further off. Sorry I don't have more specifics than that. :/

This is definitely nearing the top of our list.

Thanks for the update.

At this point, can we tell whether this is a beta or a 1.0 release blocker?

Since Beta 1 as been released, is there any news on a WebView widget support?

Thanks

@eseidelGoogle << bump >>

I recommend following https://github.com/flutter/flutter/issues/73, the work needed for both of these is similar. Status is very similar to what I reported 17 days ago, sorry. The situation for WebView is nearly identical to Maps as described here: https://github.com/flutter/flutter/issues/73#issuecomment-367818217

While you consider creating a Webview in Flutter, it would be useful to allow loading html from a string, also giving the webview a base url (from which resources referenced in the html - .css, .js, images etc - would be loaded), as can be done in iOS (shown below) and Android.
webView.loadHTMLString(htmlString, baseURL: locationWhereResourcesAreLocated);

For me too, Flutter is not an option without a fully functional WebView control, that can load HTML, local and remote URLs, execute JavaScript and enables communication between Flutter code and JavaScript in the WebView.

Any updates on integrating a Web View with flutter?

Yea, this would also be super helpful for me.

agree with agreensh - load from a string would be the icing on the cake. Maybe also from a local file (at least on Android?)? Would file: URL work for that? Some way to load directly from the Assets folder? Thanks

@IanDarwin https://github.com/dart-flitter/flutter_webview_plugin/issues/23#issuecomment-367618709 contains a few suggestions that should work here as well

We are plan to use flutter for our application but as describe above current sdks does not support webview with other flutter widget is a major blocker to us to use flutter as mobile application development sdk.

Flutter should not hit stable until this is added IMO.

Any updates about inline WebView?

@jaiminmehtadxred I think maybe you can try to implement webview with platform-specific code that's not hard

@eseidelGoogle Any progress? while flutter_webview_plugin is great, the webview is not inline. Please help us out :)

We have a messaging app (www.touchmoon.com) that relies heavily on WKWebView and MKMapView inside scrollable areas (as collection view cells). Since our Android app is dragging behind, there is a strong initiative to rewrite it from ground up using ReactNative (as Skype did, Discord, Instagram...).
I'm fond of Flutter, but lacking this feature is a breaking point where I have no arguments left.
Do you have ANY prediction, is there ANY chance this will be Flutter first-class-citizen?

Can't build the apps we have in mind until webview is implemented...what's the status? This seems pretty vital for many designs.

without inline webview, apps look like ...

https://gfycat.com/LawfulZanyGecko

@eseidelGoogle , @mit-mit , I know I am asking for a lot here, but is there even the smallest chance that this can moved to an earlier milestone? Lots of projects require inline webview, and the current plugin can be very often be a poor alternative. Thanks guys! p.s waiting eagerly for the beta 4 medium post :)

We're working on various solutions with the WebView team. This may take a while however. Currently we have no time estimate, but we are working on this. :/

I noticed that Flutter published preview version. Does this mean that the first release will not include inline WebView?

Preview without this feature seems a bit unorthodox to me :disappointed:

We will likely not have this feature in our 1.0 build. We are actively working on it, and will make it available as soon as we are able to do so in a manner that meets our standards of quality.

If you need this in the meantime, you can do it from Java/Kotlin or ObjectiveC/Swift by creating an OEM Web view and layering it on top of Flutter's view. This unfortunately won't properly composite with the rest of the Flutter widgets, which is why we are not advocating this as a solution.

It's very hard to predict.

One question that we're wrestling with is what Android versions to support. The more versions we support, the longer it will likely take to get a good solution. Do you have opinions on what versions of Android a Web view plugin needs to support to be viable?

For our use case, Android 6+ should be good enough.

To me, I think Android 5+ is ok.

5+ in our case too. We're quickly slowing down dev speed supporting 4.x
Eager to play with the first builds!

Le ven. 22 juin 2018 à 06:27, 血心 notifications@github.com a écrit :

To me, I think Android 5+ is ok.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/flutter/flutter/issues/730#issuecomment-399317053,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEFUX3nMYsc0KSQerrYlMd0vAkTPlUT4ks5t_HI9gaJpZM4GvC9x
.

Android 5+ for us

Android 5.x has ~20% market share with strong declining tendency.
So, if you take 6 mo to develop it for 5.0 (less than 5%), there will be no phones left to test it.
:-)
If it is easier, why don't you develop it for the flagship models (7+), release it (so that we can play with it) and you can expand support for older Androids as we go?

@iostriz Unfortunately, depending what version we're targetting we'd have to take entirely different approaches, because of the different APIs introduced at each version. So if it takes N months to do version X, and N+5 months to do version X-1, then it would take 2N+5 months to do version X then version X-1, but only N+5 months to do version X-1 and X at the same time. If that makes sense.

5 and above would be great, as it covers the majority of the market. Inline webview is a crucial requirement for many apps, please reconsider this feature's priority.

On Thu, Jun 21, 2018 at 10:09:44PM -0700, Ian Hickson wrote:

@iostriz Unfortunately, depending what version we're targetting we'd have
to take entirely different approaches, because of the different APIs
introduced at each version. So if it takes N months to do version X, and N+5
months to do version X-1, then it would take 2N+5 months to do version X
then version X-1, but only N+5 months to do version X-1 and X at the same
time. If that makes sense.

Then I'd vote for 6+

5 and above from our side

5 and above would be great for me

5+ would be great!

5+ should be fine

In my opinion 5+ should be the way to go.

I'd like to have a really great solution, not like WKWebView, so I'm ready to wait or contribute.

@minikin can you be more specific regarding the issues you're having with WKWebView?

I don't think it's reasonable to embed an html engine as part of the Flutter binary. So I'm guessing we will end up with a solution that delegates to an html engine that's available on the platform (on iOS this will likely be WKWebView).

android 5+

@amirh
sure, for instance, you cannot set a cookie with appropriate methods, for now (iOS11, 12beta). WKWebView just ignoring that. So you need to use workarounds.

The reason why I'd like to see some kind of WebView in Flutter that's a possibility to
use libs like d3js and render some static HTML pages.

While a pure Flutter implementation of all widgets is the ideal.
I think we will need to make exceptions in a few cases, web view is one of them.

A pure-Flutter web view implementation (as in: everything is implemented in Dart), if at all possible (I think app store policy might be a limiting factor), will be a huge project, I'm guessing at least the scale of Flutter itself.

A plugin that embeds a web browser code (e.g cef), might be possible once #7053 is resolved. I believe such an approach will still face some app store policy challenges, and will significantly increase the binary size.

I believe the reasonable and practical approach we should take for web view is to embed the platform's web view in Flutter. There are some non-trivial technical challenges involved in doing that which we are working on. I think we should use this specific issue to track the progress for getting a web view inlined. I think that solving the inlining problem will unlock a big chunk of the web view use cases, but I expect there to still be a long list of web view issues we will gradually work on (support platform's web view feature X), which I think will be more practical to track in separate issues.

@amirh Thank you very much for the clarifications!

Any updates on integrating a webview with flutter?

Updates?

We're actively working on it, you can follow the progress of #19030.

@amirh: Yay! :+1:
@Hixie : Hey Hixie :) I also need that for my app. Android 4.4 is a requirement for me, because many older devices are stuck on that.

FWIW, I would appreciate to be able to ship a specific Web rendering engine with the app, to decouple myself from the varying WebView implementations that devices ship with, and the resulting device-dependent bugs. With either a new WebView/Chromium or better yet with a GeckoView. That should also solve most of de dependency problem, I think?

You might be able to come up with a plugin that embeds a web engine, I'd guess the first blocker would be #7053. Doing this will probably have a non trivial impact on the release binary size (which might be ok for some apps).
What I'm currently working on is embedding the platform's web view in Flutter.

Yes, the platform WebView is a reasonable first step and sufficient for many applications.

On a related note is there another way to execute JavaScript code in flutter app. Right now I'm relying on creating a webview plugin and using it. The problem is that it uses a platform channel and I have to run the js asynchronously. I want to run it in a synchronous function and not have to go through future builders.

Any ideas?

@manujbahl there is no other way.

Good day, great job you all are doing. is their support for setJavaScriptCanOpenWindowsAutomatically on the flutter webView plugin?

Hanging into this list :)
I need a simple inline webview without visible controls just displaying html/css and working with js, uri via API - in a free sizeable etc. webview widget :+1:

A real webview isn't interesting for me, but inline html/css + js and the capabilities to load extended content (like fonts from google or js libs)

Anyone try #19030 AndroidView for Web View?

@MisterJimson there's some WIP here: https://github.com/flutter/plugins/tree/master/packages/webview_flutter

You should at most treat it just as a preview right now, there are some known bugs, iOS support is missing, and the API surface is very minimal (deliberately at this point, until we figure out the iOS story).

Hey guys, I released the "InAppBrowser" plugin that works in both Android and iOS systems: https://github.com/pichillilorenzo/flutter_inappbrowser

This first release is just a porting of the popular cordova-plugin-inappbrowser in order to make it work with the Flutter API.. I'm working on it for updates!!

@pichillilorenzo your plugin is not inline and this channel is about having the browser in line

@MichaelSowah Yeah, I know that, thats why I wrote "I'm working on it for updates"! I will work also on that using AndroidView for Android and for iOS when it will be released

Edit: why the "thumbs down" emoji here? Give some explanation at least

any updates for iOS?

Can you explain why it is issued for years but we don't get _anything of_ webviewin flutter itself? Isn't all about showing HTML, CSS and JS the biggest technology evolution since release of _NCSA Mosaic_? What is a technology (or a framework), _called the future of app development_, without _web view_? Isn't everything about _Google_ the web? :wink:

This is a point i do not understand :question:

For example, _inline webview_ means to have the power and _UI_ of HTML, CSS and hopefully JS to display things like the web, like _code_ in messages in _gitter webapp_, which isn't _slack App_ capable of, including JS libs for _syntax highlighting_ and so on.

The difference between other widgets and a webview is like between all the web and so called RichTextBoxes...

I see a gap between all that what's done in _hybrids_ and a framework, like flutter, but, the power of a webview is nothing else than the power of browsers, of _electron_, of _atom_ and _VS Code_, of all those things we are loving _every day_.

:confused:

@flddr Just because it is an important feature doesn't mean it is easy and quick to add. Rather the opposite.
You seem to assume that Google has unlimited resources and that adding enough additional developers to a team is enough to get instant results. Sadly that's not how the world works.

You can rest assured that the Flutter team is aware of this features importance and you can follow progress in https://github.com/flutter/plugins/tree/master/packages/webview_flutter

@zoechi ups, thanks, i did never want to say this :confused:

My guess was, it was dropped morely in development to hold a gap between _hybrids_ and _natives_, because the flutter UI itself is enormous powerful and clean, whereas the possibility _to do things in a webview_ can end in lower quality (like, miss of _material design_ or those points). Because webview is often miss-used for all things (_quick n dirty_)

Thanks for the link

@flddr I think it's mostly that they don't want to rewrite a browser in Dart (for good reasons) and instead make native functionality available which required to implement additional capabilities for Flutter.
This capability became available recently and since then implementing webview is in progress.

https://pub.dartlang.org/packages/flutter_webview_plugin (community effort) is available since quite some time, but it had the disadvantage that it was always shown on top of Flutter widgets. For example opening a drawer menu opens it behind the webview if there is overlap.
The new plugin will work well with other Flutter widgets.

@zoechi you are right - i have overseen a _rewrite in dart_ completely. I just know flutter is the future of app development in my opinion, the tooling is great, dart is great - but i couldn't dive deep in because i am developing my backend actually. I am just looking flutter.io daily and waiting for 1.0 - and sometimes, this hopeful waiting causes a talk about whatever, the main thing is something is happening.

Sorry for miss-talk about the webview

Btw: sorry, i know about all you guys how are beeing _google_, and all your hard work, but, yes, you are _google_. Nothing else. My first contact with _google_ was the last day i used _altavista_.

So, if i could bet on a company who would win a race, i ever would bet on _google_.

Thanks for infos :) I have nothing more to say for this issue :)

Flutter uses Skia to render, and Chrome uses Skia to render so it seems like it should be an easy conversion. But you cannot add a browser into Flutter this way because any flutter apps would be banned from running on the apple store. Without cross platform ability Flutter would be abandoned. Google are right to take time with this issue.

https://www.howtogeek.com/184283/why-third-party-browsers-will-always-be-inferior-to-safari-on-iphone-and-ipad/

@Rockvole very interesting 👍

Finally, I released a new version (v0.5.1) of flutter_inappbrowser where there is initial support of inline WebViews (InAppWebView class)! Obviously, this Widget is available only for Android at this moment and there are some limitations because AndroidView is not stable enough.

However, you can already play with it a little bit. There are a lot of functions and events that you can test and use! An example of an inline WebView can be found in the README.md file of the plugin repository.

EDIT 1: released new version (1.0.1) with support for both Android and iOS inline webview widget! 🎉

EDIT 2: it has been renamed to flutter_inappwebview. Current version is 2.0.1! There are a lot of new events, options and methods.

I am just curious: it is mentioned in Google Developer Days China (last month) that the official WebView plugin should be release with developer preview 2. However, this plugin webview_flutter is still in development: https://github.com/flutter/plugins/tree/master/packages/webview_flutter

@imWildCat Thank you for joining us at GDD China. To clarify, we demoed a _preview_ of the WebView widget at GDD. I checked the video recording (55:12) of the GDD keynote to make sure we didn't say it's released. Nonetheless, we apologize that you were under the impression that this plugin had been released.

@InMatrix Sorry for my misunderstanding. Many thanks your explanation and I really appreciate it. I look forward to the release of the official WebView plugin.

flutter/plugins#890 added iOS support to the webview_flutter plugin.
The platform views embedding support, which the inline webview is based on, is still in early preview (see https://github.com/flutter/flutter/issues/19030#issuecomment-437534853 ).

Open issues are tagged with the platform-views and/or webview labels, please upvote the issues you care about to help us prioritize.

Note that if you want to try it out on iOS you will need to enable the preview flag, see more details on:
https://github.com/flutter/flutter/issues/19030#issuecomment-437534853

The absence of a usable WebView is really a deal-breaker to me personally.
flutter_inappbrowser is a great package that comes very close to full usability but still lacks keyboard support yet. Unfortunately, I was just going to build a code editor app........

Congratulations to 1.0 for best mobile framework ever :tada:

Now waiting for webview :relaxed:

Just to clarify: The webview_flutter plugin provides an embedded WebView on Android and iOS and is currently in developers preview.

We are tracking issues and missing features with the webview tag, if you care about specific issues you can help by filing an issue if there's isn't one yet, or upvoting an existing issue. PRs are of course also welcomed 😄

@amirh Sorry to hassle you with questions. We are heavily considering moving over to Flutter for a upcoming project, but we rely on a WebView to work (inline, flutter_webview_plugin is not an option). Do you have any information about upcoming updates or a roadmap for us? Thank you very much for any reply, keep up the great work and may the Flutter love spread around the world.

@danielRi https://pub.dartlang.org/packages/webview_flutter

Very interesting topic for my problem, I have come across to this topic after struggling a lot to find a right web view for flutter. Unfortunately, this new plugin (still developer preview) has a big issue with Android when I tried to open keyboard. Would that be fixed when it comes to release?

i think foreign function interface + webkit is best way. inline android webview or ios wkwebview is not good idea

i think foreign function interface + webkit is best way. inline android webview or ios wkwebview is not good idea

There are pros and cons (the obvious one is binary size).
I definitely see how for certain use case bundling a web engine would be the preferred choice.
It may be possible to add this as an alternative webview_flutter implementation by implementing the platform interface. If anyone gives it a shot I'm curious to lean about it!