WhatsApp, dialer and email integration for a flutter WebView application

Recently we were working on an E-commerce website. Then we have decided to build a webview flutter application.  We built it successfully and was working fine. But in the website we have a feature to interact with the customer care executive through WhatsApp. But this did not work in the flutter app. But works very well from the browser on the desktop.  However, because WhatsApp and our flutter app are separate applications, this did not work or we were unable to activate WhatsApp through our application. 

In mobile, we get the below error when we try to click on the whatsApp button in the application: 

ERR_UNKNOWN_URL_SCHEME Error

The url_launcher module in Flutter can be used to incorporate WhatsApp into a Flutter webview application.

1. Add the url_launcher dependency to your pubspec.yaml file:

dependencies:

  url_launcher: ^6.0.9

2.  Import the url_launcher package in your Dart file:

        import 'package:url_launcher/url_launcher.dart';

3.  In your webview widget, add an onPageFinished callback that gets triggered when the page finishes loading. Inside this callback, you can use url_launcher to launch WhatsApp:

WebView(

  initialUrl: 'https://example.com',

  onPageFinished: (String url) {

    if (url.contains('whatsapp://send')) {

      launch(url);

    }

  },

)

or: 

navigationDelegate: (NavigationRequest request) {

            if (request.url.contains('api.whatsapp.com')) {

              launch(request.url); //This is where Whatsapp launches

              return NavigationDecision.prevent;

            }

In the above code, we check if the URL contains whatsapp://send. If it does, we use launch to open the URL in the system's default browser, which will launch WhatsApp if it is installed.
Note that this will only work on devices that have WhatsApp installed. If WhatsApp is not installed, the URL will not be opened.

Same thing we can do for a dialer and email integrations: Here is the code for that

 if (request.url.contains('mailto:')) {

              launch(request.url);

              return NavigationDecision.prevent;

            }

            if (request.url.contains('tel:')) {

              launch(request.url);

              return NavigationDecision.prevent;

            }

In some cases, the other urls apart from this may not work so, you  need to add NavigationDecision.Navigate option as shown in the below code:

 if (request.url.contains('wa.me')) {

              launch(request.url); //This is where Whatsapp launches

              return NavigationDecision.prevent;

            }

            if (request.url.contains('mailto:')) {

              launch(request.url);

              return NavigationDecision.prevent;

            }

            if (request.url.contains('tel:')) {

              launch(request.url);

              return NavigationDecision.prevent;

            }

            return NavigationDecision.navigate;

          },

Hope this helps.