Flutter: passing data to WebView

Question

I get the location in my Flutter app. I have a WebView and I want to pass the location inside it (to handle it after in the site opened within the webview).

var userLocation = Provider.of<UserLocation>(context);

And my WebView:

WebView(
      initialUrl: widget.url,
      javascriptMode: JavascriptMode.unrestricted,
 )

Is there a way to do it? My goal is like a binding between flutter and angular sending continuous location data.

Possible duplicate of [Run some Javascript in Flutter Webview](https://stackoverflow.com/questions/50350001/run-some-javascript-in-flutter-webview) — Sahandevs, Oct 04 '19 at 12:41
@Augustin R url accepted 1 parameter, that's the link to my site — Edoardo Tavilla, Oct 04 '19 at 12:46
@Sahandevs no, I don't want to run JS. I want to pass the location parameter to WebView — Edoardo Tavilla, Oct 04 '19 at 12:48
@EdoardoTavilla do you mean browser location ( url ) or coordinates ? — Sahandevs, Oct 04 '19 at 13:06
if you are sending from flutter to js, you can define a function in browser window object like `window.onReceiveCoords = (coords) => console.log();` and in flutter call `flutterWebviewPlugin.evalJavascript("window.onReceiveCoords({x: 1, y: 3}")` — Sahandevs, Oct 04 '19 at 13:14
It seems that this is some new feature and I've found [this GitHub ticket](https://github.com/flutter/flutter/issues/27472) asking to support this functionality and it is still open. It would be nice if you could also provide what you have done so far, like [a minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — MαπμQμαπkγVπ.0, Mar 15 '21 at 17:35

score 1 · Answer 1 · answered Mar 25 '21 at 09:13

normally To receive data from flutter we add js function in html

function fromFlutter(location) {
    document.getElementById("locationId").innerHTML = location;
    sendBack();
}

and then in flutter create a web view controller then

_controller.evaluateJavascript('fromFlutter("From Flutter")');

or for variable containing location

_controller.evaluateJavascript('fromFlutter("$locationVar")');

score 1 · Answer 2 · answered Apr 07 '21 at 16:48

I have this same problem, and the original question mentioned Angular which is what I am also using. So let me share my solution.

You can pass route params to an angular page, so if you have the data going from your flutter app to a database, say Firebase, then you can pass the specific document ID as a route param in flutter webview, and any data you are passing in flutter will auto sync up to the route that you have called in angular.

Flutter: passing data to WebView

2 Answers2