Link handling

[wkethman]

Implementing the plugin as shown:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "http://wckethman.com/htree/my-app/www/index.html",
          withJavascript: true,
        )
      },
    );
  }
}
This works fine but when clicking on tel: links "net::ERR_UNKNOWN_URL_SCHEME" thrown

Any suggestions?

[shinriyo]

@wkethman You mean

You replaced from

routes: {
  "/": (_) => new WebviewScaffold(
  url: "http://wckethman.com/htree/my-app/www/index.html",
  withJavascript: true,
)

to

like this?

routes: {
  "/": (_) => new WebviewScaffold(
  tel: "000-000-000",
  withJavascript: true,
)

I guess it doesn't support tel:.

If you append feature for tel:, author may accept your pull-request.

https://github.com/dart-flitter/flutter_webview_plugin/blob/b41c311a9562f770df52d8a61b5ea96c0a1a41b8/ios/Classes/FlutterWebviewPlugin.m#L99

[lejard-h]

Not supported yet.

Have not done that yet, but we should probably be able to catch that kind of call from the webview and call url_launcher

[alexmdavis]

The url_launcher approach works for me, except the Android webview also renders the ERR_UNKNOWN_URL_SCHEME error. I'd also need to interrupt loading; something like #14.

[sameerbakre]

do we have any way to handle error page on android yet? I can redirect to previous url after error. However it still shows the error which is not a good user experience.

[chintooflutter]

is this issue resolved or pending? i am facing the same problem.

Also not working when I click to whatsapp share button. It is opening in google play store.

[mohdkhmais]

having the same issue when clicking on tel link, any solutions so far ?

[grungebuddy]

having the same issue when clicking on tel link, any solutions so far ?

Here is a solution to disable navigation for tel and mailto for now:

https://stackoverflow.com/questions/56421218/how-to-allow-mailto-and-tel-url-schemes-in-webview-flutter

[wooldridgetm]

meh, just listen to the onUrlChanged stream to detect when the url is changing & has mail/tel/http(s). If so, then invoke goBack() on the WebViewPlugin instance & then use url_launcher to open the link. something like this...

_subscription = webViewPlugin.onUrlChanged.listen((String url) async {
      print("navigating to...$url");
      if (url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("https"))
      {
        await webViewPlugin.stopLoading();
        await webViewPlugin.goBack();
        if (await canLaunch(url))
        {
           await launch(url);
           return;
        }
        print("couldn't launch $url");
      }
    });

[TimothySealy]

I've used a slightly different approach. For my use case I only needed to override the telephone links. I've used the invalidUrlRegex parameter of the WebviewScaffold to suppress navigation to tel: links:

WebviewScaffold(
   url: url,
   invalidUrlRegex: '^tel:',
);

I've used url_launcher to actually load the tel: links. In order to do so I listen to the state changed (onUrlChanged will not work because the navigation is suppressed for tel: links):

StreamSubscription<WebViewStateChanged> _onStateChanged;
_onStateChanged = flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) async {
  if (mounted) {
    if (state.url.startsWith('tel:') && state.type == WebViewState.abortLoad) {
      if (await canLaunch(state.url)) {
        await launch(state.url);
      }
    }
  }
});

Note that the state.type == WebViewState.abortLoad is not really required and you could combine the inner two if statements for brevity.

Also the tel: links load fine on iOS (also after this implementation), this is basically a work around for Android.

[mulenatni]

choose file is not working on flutter web app......call works fine thank you for your help

[djks74]

meh, just listen to the onUrlChanged stream to detect when the url is changing & has mail/tel/http(s). If so, then invoke goBack() on the WebViewPlugin instance & then use url_launcher to open the link. something like this...

_subscription = webViewPlugin.onUrlChanged.listen((String url) async {
      print("navigating to...$url");
      if (url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("https"))
      {
        await webViewPlugin.stopLoading();
        await webViewPlugin.goBack();
        if (await canLaunch(url))
        {
           await launch(url);
           return;
        }
        print("couldn't launch $url");
      }
    });

Hi @wooldridgetm,
could you please share full example code for this?

I have problem and dont know how or where to put this code on the webview script.

I really appreciate.

[soukainader]

@djks74 please did you find a solution

[jishnumadhavan]

@djks74 please did you find a solution

if u have solution please share

[soukainader]

@djks74 please did you find a solution

if u have solution please share

yes please I really need it in my project

[djks74]

You mean for choose file and geolocation?
Im using this https://pub.dev/packages/flutter_webview_pro

Its working perfectly.

but if you want the navigation link working, better using https://pub.dev/packages/webview_flutter with launcURL

WebView(
onPageStarted: (String url) {
onUrlChange(url);
},
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
navigationDelegate: (NavigationRequest request) {
if (request.url.contains("uber")) {
_launchURL(request.url);
return NavigationDecision.prevent;
} else if (request.url.contains("tel:")) {
_launchURL(request.url);
return NavigationDecision.prevent;
} else if (request.url.contains("https://wa.me/")) {
_launchURL(request.url);
return NavigationDecision.prevent;
} else if (request.url.contains("mailto:")) {
_launchURL(request.url);
} else if (request.url.contains("market://")) {
return NavigationDecision.prevent;
}

                  return NavigationDecision.navigate;
                },

_launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}

[soukainader]

You mean for choose file and geolocation? Im using this https://pub.dev/packages/flutter_webview_pro

Its working perfectly.

but if you want the navigation link working, better using https://pub.dev/packages/webview_flutter with launcURL

WebView( onPageStarted: (String url) { onUrlChange(url); }, initialUrl: url, javascriptMode: JavascriptMode.unrestricted, navigationDelegate: (NavigationRequest request) { if (request.url.contains("uber")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("tel:")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("https://wa.me/")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("mailto:")) { _launchURL(request.url); } else if (request.url.contains("market://")) { return NavigationDecision.prevent; }

                  return NavigationDecision.navigate;
                },

_launchURL(String url) async { if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } } }

@djks74 thank you so much, please do you have any idea how to check connexion in webview flutter. thank you in advance

[djks74]

Can you please describe what connection you mean? in flutter to phone to see debug?

[soukainader]

Can you please describe what connection you mean? in flutter to phone to see debug?

No I mean to replace WEB PAGE NO AVAILABLE with my customize page if I lost the connexion and reload it if I'm connected again.

[Mane-Mt]

You mean for choose file and geolocation? Im using this https://pub.dev/packages/flutter_webview_pro

Its working perfectly.

but if you want the navigation link working, better using https://pub.dev/packages/webview_flutter with launcURL

WebView( onPageStarted: (String url) { onUrlChange(url); }, initialUrl: url, javascriptMode: JavascriptMode.unrestricted, navigationDelegate: (NavigationRequest request) { if (request.url.contains("uber")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("tel:")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("https://wa.me/")) { _launchURL(request.url); return NavigationDecision.prevent; } else if (request.url.contains("mailto:")) { _launchURL(request.url); } else if (request.url.contains("market://")) { return NavigationDecision.prevent; }

                  return NavigationDecision.navigate;
                },

_launchURL(String url) async { if (await canLaunch(url)) { await launch(url); } else { throw 'Could not launch $url'; } } }

@djks74 please can you share with us your solution (the complete code) with flutter_webview_plugin because in my case I can't, unfortunately, change to webview_flutter