How to allow mailto and tel URL schemes in WebView Flutter?

Question

I am developing WebApp in Flutter but when I click on tel:987654321 or mailto: links going page Not Found, To open the default app in mobile I am using url_launcher dependency But in the background when I click WebView also run the same link and go to page not found.

How to handle this task?

score 17 · Answer 1 · edited Jun 24 '19 at 20:02

17

navigationDelegate: (NavigationRequest request) {
  if(request.url.contains("mailto:")) {
    launch(request.url);
    return NavigationDecision.prevent;
  }
  else if (request.url.contains("tel:")) {
    launch(request.url);
    return NavigationDecision.prevent;
  }
},

edited Jun 24 '19 at 20:02

LocalPCGuy

6,006
2
32
28

answered Jun 13 '19 at 07:14

Sarthak Solanki

468
1
6
18

1

thanks bro :+1:, you can add "sms:" too for launch to sms activity :+1: – anztrax Sep 04 '19 at 14:43
@sarthak-solanki can you please answer to the below question. https://stackoverflow.com/questions/65069369/how-to-open-tel-mailto-whatsapp-links-in-a-flutter-webview – acmsohail Nov 30 '20 at 07:20
I'm using the same code to allow mailto scheme in flutter webview. But it is throwing errors and I am unable to build the apk file. – PARAS GUPTA Jan 21 '21 at 13:47

score 6 · Answer 2 · answered Jan 19 '20 at 07:45

Add some details, need url_launcher plugin

import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

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

in Widget-build ...

WebView(
        initialUrl: 'http://example.com',
        navigationDelegate: (NavigationRequest request) {
          if (request.url.contains("mailto:")) {
            _launchURL(request.url);
            return NavigationDecision.prevent;
          } else if (request.url.contains("tel:")) {
            _launchURL(request.url);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
)

score 0 · Answer 3 · answered Aug 22 '22 at 15:04

In short, do this, it might help:

Html links:

<a href="tg:resolve?domain=YourId">Telegram (YourId)</a>
<a href="mailto:you@example.com">Email (you@example.com)</a>

Flutter:

import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart'; 

// ...

    WebView(
      initialUrl: 'https://example.com',
      navigationDelegate: (NavigationRequest request) {
        if (request.url.contains("mailto:")) {
          canLaunchUrl(Uri(
                  scheme: 'mailto', path: 'you@example.com'))
              .then((bool result) {
            launchUrl(
              Uri(scheme: 'mailto', path: 'you@example.com'),
              mode: LaunchMode.externalApplication,
            );
          });
          return NavigationDecision.prevent;

        } else if (request.url.contains("tg:")) { // TELEGRAM
          canLaunchUrl(
                  Uri(scheme: 'tg', path: 'resolve?domain=YourId'))
              .then((bool result) {
            launchUrl(
              Uri(scheme: 'tg', path: 'resolve?domain=YourId'),
              mode: LaunchMode.externalApplication,
            );
          });
          return NavigationDecision.prevent;

        }

        return NavigationDecision.navigate;
      },
    ),

// ...

How to allow mailto and tel URL schemes in WebView Flutter?

3 Answers3

Linked