I created a simple javascript that sends a response through console.log(); and I have a flutter WebView that loads the URL and in my flutter android studio console I get this response as I/chromium(27778): [INFO:CONSOLE(20)] "My name", source: https://response_test.php but I'm looking for a way to receive this response in my flutter app so I can use the response to navigate user to another page. My code looks like below:
My javascript code:
<?php
$MyPHPStringVar = "My name";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>";
console.log(MyJSStringVar);
</script>
</head>
<body>
</body>
</body>
</html>
And my flutter webview is like this:
WebView(
javascriptMode:JavascriptMode.unrestricted,
initialUrl: "https://hobber.ae/api/webview_response_test.php",
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
I want a way to receive my response inside my activity so I can make use of thhe data received.
After checking different option to achieve this I was able to come up with a solution which is using Print.postMessage instead of using console.log() and my javascript code looks like below:
<script type='text/javascript'>
Print.postMessage('<?php Print($MyPHPStringVar); ?>');
</script>
And in my flutter webview I got the value in onMessageReceived: and my final flutter code is like below:
Stack(children: [
javascriptChannels:Set.from([
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
})
]),