How to open app links in flutter webview?

Question

In Flutter, I use the flutter webview plugin to launch a url like:

flutterWebviewPlugin.launch(url)

or

WebviewScaffold(
  url: url,
  appBar: new AppBar(title: Text(title), actions: [
    new IconButton(
      icon: const Icon(Icons.share),
      onPressed: () => Share.share(url),
    )
  ]),
  withZoom: true,
  withLocalStorage: true,
  withJavascript: true,
);

However, if any links inside the opened web page is an app link, like: fb://profile, I will get net::ERR_UNKNOWN_URL_SCHEME.

In android, I found the solution is to override shouldOverrideUrlLoading as mentioned in here, but what should I do in flutter?

could you put your code ? – diegoveloper Aug 14 '18 at 04:40 — diegoveloper, Aug 14 '18 at 04:40

score 18 · Answer 1 · answered Sep 30 '19 at 21:04

18

You can use webview_flutter in pub.dev Packages

WebView(
        initialUrl: 'https://my.url.com',
        javascriptMode: JavascriptMode.unrestricted,
        navigationDelegate: (NavigationRequest request)
        {
          if (request.url.startsWith('https://my.redirect.url.com'))
          {
            print('blocking navigation to $request}');
            _launchURL('https://my.redirect.url.com');
            return NavigationDecision.prevent;
          }

          print('allowing navigation to $request');
          return NavigationDecision.navigate;
        },
      )

And you can launch url with url_launcher in pub.dev Packages

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

answered Sep 30 '19 at 21:04

Álvaro Agüero

4,494
1
42
39

I'm using the same code to allow mailto scheme in flutter webview (https://pub.dev/packages/webview_flutter). But it is throwing errors and I am unable to build the apk file. – PARAS GUPTA Jan 21 '21 at 14:13
Error: Not a constant expression. if (request.url.contains("mailto:")) { ^^^^^^^ Error: Method invocation is not a constant expression. if (request.url.contains("mailto:")) { ^^^^^^^^ Error: Method invocation is not a constant expression. launch(request.url); ^^^^^^ Error: Not a constant expression. navigationDelegate: (NavigationRequest request) { ^^^^^^^^^^^^^^^^^^^^^^^^^^^ – PARAS GUPTA Jan 25 '21 at 05:46
I have posted this on stack as well. - Please check this - https://stackoverflow.com/questions/65880593/how-to-allow-mailto-schemes-in-webview-flutter – PARAS GUPTA Jan 25 '21 at 07:45
This answer is deprecated now and removed from the package as well.\ – Devendra Singh Jun 27 '23 at 08:19

score 2 · Answer 2 · answered Aug 14 '18 at 05:05

2

Looks like you can achieve what you need using this plugin : https://pub.dartlang.org/packages/flutter_web_view

Listen for your redirects:

  flutterWebView.listenForRedirect("fb://profile", true);

Get the value using :

flutterWebView.onRedirect.listen((url) {
   flutterWebView.dismiss();
    //now you have the url
 });

After you have the url you can use this package https://pub.dartlang.org/packages/url_launcher

answered Aug 14 '18 at 05:05

diegoveloper

93,875
20
236
194

That plugin has a lot of issues, e.g. gradle file missing dependencies to kotlin, AndroidManifest file missing declaration of the activity, etc. I have emailed the developer to see if he still maintains it. – Herman Aug 15 '18 at 05:53

score 1 · Answer 3 · answered Feb 21 '21 at 19:23

There is a solution for the net::ERR_UNKNOWN_URL_SCHEME Error here that I copied below:

Add the below line in your application tag:

android:usesCleartextTraffic="true"

As shown below:

<application
    ....
    android:usesCleartextTraffic="true"
    ....>

If you have network security config such as: android:networkSecurityConfig="@xml/network_security_config"

No Need to set clear text traffic to true as shown above, instead use the below code:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        ....
        ....
    </domain-config>

    <base-config cleartextTrafficPermitted="false"/>
</network-security-config>

Set the cleartextTrafficPermitted to true

score -1 · Answer 4 · answered Aug 14 '18 at 06:05

You can use web plugin like

 @override
 Widget build(BuildContext context) {
   String url = widget.url;
   return Scaffold(
    body: Center(
    child : WebviewScaffold(
      url: "https://google.com",
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      withZoom: true,
      withLocalStorage: true,
     )
   ),
 );
}

How to open app links in flutter webview?

4 Answers4

Linked