Launching URLs in Flutter.

Introduction

You know how when you click on a twitter link from inside another application and it opens up the twitter mobile app? That’s what we’ll be looking at how to achieve in our own flutter applications today. We’ll be using the flutter url_launcher package in this tutorial.

Setting up the url_launcher in your project

Visit url_launcher and copy the latest version then head over to pubspec.yaml in your flutter project and add it as shown below:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.4

Run flutter pub run in the terminal to install the plugin then Import import 'package:url_launcher/url_launcher.dart'; into the dart file you want to use it in.

Open webpage with flutter

Declare the website URL you wish to launch and an asynchronous function that launches the URL like shown below:

const String url="https://twitter.com/manniikin";
    //Android and Ios
    Future<void> redirect() async {
      if (await canLaunch(url)) {
        await launch(url,forceWebView:false,enableJavaScript:false); 
      } else {
        throw 'Could not launch $url';
      }
    }

You can pass forceWebView: true parameter to tell the plugin to open a WebView instead. If you do this for a URL of a page containing JavaScript, make sure to pass in enableJavaScript: true.
Note that without the forceWebView: true and enableJavaScript: true parameters, the url launches the app version if installed in the device.

Launch Google and Apple map.

To navigate from your app to Google map or Apple map is a no brainer as well all you need is the latitude and longitude of the location and the url. The function:

const lat = "122.0575";
const lng = "37.3875";
const googleUrl = 'https://www.google.com/maps/search/?api=1&query=$lat,$lng';
const appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";
_openMap() async {
  if (await canLaunch(googleUrl)) {
    await launch(googleUrl);
  }else if(await canLaunch(appleMapsUrl)){
    await launch(appleMapsUrl);
}
else{
    throw 'Could not launch $url';
  }
}
//the above function works perfectly even with "Function<void>" excluded.

Send mail

_sendMail() async {
  // Android and iOS
  const mailTo = "jhaymesifiok@gmail.com"; //address to mail
  const dummyMessage = "Hello World";
const subjectText = "Greetings";
  const uri = 'mailto:$mailTo?subject=$subjectText&body=$dummyMessage';
  if (await canLaunch(uri)) {
    await launch(uri);
  } else {
    throw 'Could not launch $uri';
  }
}

Make phone call

_makeCall() async {
  String telephoneUrl = "tel:+4447012540083";

  if (await canLaunch(telephoneUrl)) {
    await launch(telephoneUrl);
  } else {
    throw "Can't phone that number.";
  }
}

Send SMS

_textMe() async {
      const uri = 'sms:+4447012540083';
      if (await canLaunch(uri)) {
        await launch(uri);
      } else {
        throw 'Could not launch $uri';
      }
  }

Conclusion

In this tutorial, we’ve gone through how we can launch external URL from our flutter applications. If you’d like to read more about this check out the documentation.

Jhaymes blog