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

Viewed 763

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 '0123456789', mailto:'abc@gmail.com', 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: And may i know where to add this following code to work ?

              if (request.url.contains("mailto:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              } else if (request.url.contains("tel:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              } else if (request.url.contains("sms:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter_offline/flutter_offline.dart';
import 'package:location/location.dart';
import 'package:url_launcher/url_launcher.dart';

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

void main() => runApp(MyApp());
Color btnColor = Color(0xff03a9f3);
Color bgColor = Color(0xffe9f4fc);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Qavenue',
      home: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return Container(
            child: connected
                ? MyHomePage()
                : Center(
                    child: Image.asset(
                      'assets/offline_blue.gif',
                      fit: BoxFit.cover,
                      width: 200.0,
                    ),
                  ),
            color: bgColor,
          );
        },
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String url = "https://example.xyz/";

  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  StreamSubscription<WebViewStateChanged>
      _onchanged; // here we checked the url state if it loaded or start Load or abort Load

  @override
  void initState() {
    super.initState();
    _onchanged =
        flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if (mounted) {
        if (state.type == WebViewState.finishLoad) {
          // if the full website page loaded`
          print("loaded");
        } else if (state.type == WebViewState.abortLoad) {
          // if there is a problem with loading the url
          print("there is a problem");
        } else if (state.type == WebViewState.startLoad) {
          // if the url started loading
          print("start loading");
        }
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    flutterWebviewPlugin
        .dispose(); // disposing the webview widget to avoid any leaks
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: WillPopScope(
          onWillPop: () {
            flutterWebviewPlugin.canGoBack().then((value) {
              if (value) {
                flutterWebviewPlugin.goBack();
              } else {
                exit(0);
              }
            });
          },
          child: WebviewScaffold(
            url: url,
            withJavascript: true,
            withZoom: false,
            hidden: true,
            geolocationEnabled: true,
            initialChild: Container(
              color: Colors.white,
              child: Center(
                child: Image.asset('assets/icon/images/logo1.jpg'),
              ),
            ),
          )),
    );
  }
}
0 Answers
Related