Opening urls inside a web view

[GustavoAcacioDev]

Has your issue been reported?

• [X] I have searched the existing issues and confirm it has not been reported.
• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I have a webview element on my page, and inside this webview, I have a button, that when clicked, instead of redirecting to a WhatsApp Api page, that starts a conversation, redirects to a page not available. And this problem only happens on Android, in IOS systems, the button works normally

Expected Behavior

The expected behavior is that when i click on the button, inside the webview, it redirects to a WhatsApp API page that starts a conversation.

Steps To Reproduce

1. Create new page.
2. Add a webview component.
3. Insert this link on the webview element: https://friends.dentalaccess.com.br/
4. Run the application on an Android device.
5. Click in the WhatsApp logo button.

Bug Report Code

IT4elPHlvM91ofpE7ar2c/lagio5JlA2aIIrl9VhbAw2B5vkOpoEYej+RHpWXc+FT2xYelv9hn8d09bUhofDGOQHAxetQaJM/qt6UDvKeGKtaL6vCJCwdkFDMJ9bJEuV0aTQriJSALJpLlIh22aEIOmXVnTaGKX6OlgeDs6LNqH4pVGkAj+6Xn0Jg1ZSfCvr

Context

This issue affects me my not allowing me using the content's functionalities inside webview

Additional info

Environment

- FlutterFlow version: 3.1 
- Platform: Mobile
- Browser name and version: Chrome 107.0.5304.110
- Operating system and version affected: Android

[wenkaifan0720]

Hi @GustavoAcacioDev. This is a known issue for webview on Android (https://stackoverflow.com/questions/51907134/unable-to-share-on-whatsapp-from-my-webview-getting-the-webpage-at-whatsapp, https://stackoverflow.com/questions/63132744/whatsapp-api-not-getting-loaded-in-webview-android). Unfortunately, there's not much we can do on the Flutter side.

My recommendation is to use a Flutter Icon Button to cover that button which has the right url directions. Or to just let the user open the webpage in their browser directly.

[bthomaz]

Hello @wenkaifan0720

In the link you send bellow, there are some examples how open this kind of links in fluttler. Why Fluttler flow do not implement the code on yours solutions?

Hi @GustavoAcacioDev. This is a known issue for webview on Android (https://stackoverflow.com/questions/51907134/unable-to-share-on-whatsapp-from-my-webview-getting-the-webpage-at-whatsapp, https://stackoverflow.com/questions/63132744/whatsapp-api-not-getting-loaded-in-webview-android). Unfortunately, there's not much we can do on the Flutter side.

My recommendation is to use a Flutter Icon Button to cover that button which has the right url directions. Or to just let the user open the webpage in their browser directly.

[wenkaifan0720]

Because these are java code, whereas in Flutter we depend on Flutter's webview package to render the web pages. So it is up to the package developer to tackle these issue.

[bthomaz]

Because these are java code, whereas in Flutter we depend on Flutter's webview package to render the web pages. So it is up to the package developer to tackle these issue.

If works with java, works with dart as well. Looking in internet as a bunch of implemententions of this on Dart.

https://stackoverflow.com/questions/70921109/fix-neterr-unknown-url-scheme-whatsapp-link-on-flutter-webview https://blog.codemagic.io/inappwebview-the-real-power-of-webviews-in-flutter/

Here is a code example how we do this in flutter:

InAppWebView(
key: webViewKey,
initialUrlRequest: URLRequest(
url: widget.url == Uri.parse(widget.url)),
initialOptions: options,
shouldOverrideUrlLoading:
(controller, navigationAction) async {
var url = navigationAction.request.url;
var urlHost = url.toString();
if (urlHost
.contains('https://api.whatsapp.com/send?text=')) {
urlHost = urlHost.replaceAll(
'https://api.whatsapp.com/send?text=',
'whatsapp://send?text=');
} else if (urlHost
 .contains('https://api.whatsapp.com/send?phone=')) {
 urlHost = urlHost.replaceAll(
'https://api.whatsapp.com/send?phone=',
'whatsapp://send?phone=');
 }
 if (![
 "http",
 "https",
 "file",
 "chrome",
"data",
"javascript",
"about"
].contains(url.scheme) \|\|
urlHost.startsWith('whatsapp://send')) {
if (await canLaunchUrl(url)) {
 if (urlHost.startsWith('whatsapp://send')) {
await launchUrl(url,
mode: LaunchMode.externalNonBrowserApplication);
 } else {
await launchUrl(url);
}
 }
return NavigationActionPolicy.CANCEL;
 } 
return NavigationActionPolicy.ALLOW;
},

Why we are worried about your reply

We paid Fluttler Flow as well, and when we get a issue on future, as clients, we don't excepted to get a reply like "It's has bug in stackoverflow and no one know how to solve", because looking on internet has a bunch of workarounds of implementations of that.

[wenkaifan0720]

Hi @bthomaz. You are right. I apologize for not looking into this issue with more caution. I thought this issue needs modification at the Android level, but turns out it can be done at the Flutter level. This should be fixed in our next update.

[vnbogdanov2020]

I have the same problem. Moreover, if you pack a Deeplink to the application page into an html file, open the file on the device and click on the link, the application opens on the specified page. And if the same code is placed in a WebView widget, then when you click on the link an error appears. Looks like a problem with WebView...

[jakaratongskul]

@vnbogdanov2020 have you been able to workaround this ? I am having a problem with this at the moment.