CODEWITHSUNDEEP
iosflutterdartflutterwebviewpluginwebview-flutter
acmsohail
acmsohail

Reputation: 1023

How to open tel, mailto, whatsapp links in a flutter webview?

I am a web developer and beginner to flutter. I created a Flutter web view application by watching a few tutorials and its working fine for iOS and Android. But when I click on tel:'0123456789', mailto:'[email protected]', WhatsApp link (https://wa.me/9712345678), it's going page Not Found. I want to open an external application for those conditions. How to handle this task in a flutter to support in iOS and Android? I used the flutter webview plugin to launch a url like:

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: {
        "/": (_) => new WebviewScaffold(
              url: "https://www.website.com/",
              appBar: null,
              withJavascript: true,
              hidden: true,
              enableAppScheme: true,
            ),
      },
    );
  }
}

Upvotes: 1

Views: 2097

Answers (1)

Kayahan Kahrıman
Kayahan Kahrıman

Reputation: 628

Install flutter_url_launcher from https://pub.dev/packages/url_launcher

import 'package:url_launcher/url_launcher.dart';

return WebView(

  ...

  navigationDelegate: (NavigationRequest request) {                
    
  if (request.url.contains('wa.me')) {
    launch(request.url); //This is where Whatsapp launches
    return NavigationDecision.prevent;
  }

  ...
});

You can do the same thing for tel: and mailto: if you want user to use native apps for calling or sending email.

return WebView(

  ...

  navigationDelegate: (NavigationRequest request) {                
    
  if (request.url.contains('mailto:')) {
    launch(request.url);
    return NavigationDecision.prevent;
  }

  if (request.url.contains('tel:')) {
    launch(request.url);
    return NavigationDecision.prevent;
  }

  ...
});

Upvotes: 3

Related Questions