Url launcher Package in flutter : How to implement it

URL: https://pub.dev/packages/url_launcher
Supported Platforms: Android, iOS, Linux, macOS, Web, Windows
Popularity: 5,655 ❤

No app without a web link!

The URL-launcher package makes it easy for you to open external links. This includes website URLs, as well as email, phone, and SMS links. They will then be executed by your smartphone (or other electronic devices) in the corresponding app.

URL Launcher async functions

The URL Launcher plugin provides two asynchronous functions: canLaunch and launch. The canLaunch function returns a boolean value that indicates whether or not a device can handle a certain URL scheme. For example, if a device does not have an email app installed, it will be unable to launch a URL using the mailto scheme.

The launch function, on the other hand, requires a String as an argument that serves as the URL; it parses the given URL string and passes it to the underlying platform for processing. The launch function also has other named optional parameters that can be used to change specific settings on both Android and iOS platforms, some of which are as follows:

• Android-only settings:
  • forceWebView – If set to null or false, the URL is opened in the device’s default browser; otherwise, the URL is launched in a WebView
  • enableJavaScript – If set to true, JavaScript is enabled in WebView
  • enableDomStorage – When the value is set to true, WebView enables DOM storage
• iOS-only settings:
  • forceSafariVC – If set to true, it opens the URL in the Safari View Controller; otherwise, it uses the device’s default handler
  • statusBarBrightness – collects an enum value which can be either Brightness.dark or Brightness.light to set the status bar brightness of the application after opening a link on iOS devices

Now that we understand how the URL Launcher plugin works and what it provides, let’s look at some examples of how we can implement it in our application.

Launching a webpage with URL Launcher

The code below is quite self-explanatory; notice that we use the canLaunch function to check whether the device can launch a particular URL scheme before invoking the launch function.

TextButton(
  onPressed: () async {
      const url = 'https://flutterfever.com';
      if(await canLaunch(url)){
        await launch(url);
      }else {
        throw 'Could not launch $url';
      }
    },
    child: const CustomWidget(
      icon: Icons.language,
      label: 'Open a URL',
    ),
),

Run the code on your device and tap the Open a URL card in our original UI to launch the webpage.

Launching maps with url launcher

To view a location on a map, we need to pass the location’s latitude and longitude values to the mapUrl along with the geo: URL scheme.

TextButton(
  onPressed: () async {
    const String lat = "42.3540";
    const String lng = "71.0586";
    const String mapUrl = "geo:$lat,$lng";
    if (await canLaunch(mapUrl)) {
      await launch(mapUrl);
    } else {
      throw "Couldn't launch Map";
    }
  },
  child: const CustomWidget(
    icon: Icons.near_me,
    label: 'Check location',
  ),
),

Launching a mail app with url launcher

To send an email, we need to pass in the recipient’s email address, a subject line, the body of our email, and the mailto: URL scheme to the emailUrl widget in addition to the mailto: URL scheme. See below:

TextButton(
    onPressed: () async {
    String email = 'this.is.tijani@gmail.com';
    String subject = 'This is a test email';
    String body = 'This is a test email body';   

    String emailUrl = "mailto:$email?subject=$subject&body=$body";

    if (await canLaunch(emailUrl)) {
      await launch(emailUrl);
    } else {
      throw "Error occured sending an email";
    }
  },
  child: const CustomWidget(
    icon: Icons.forward_to_inbox,
    label: 'Send an email',

Launching a text message app with url launcher

To send an SMS message, we use the sms: URL scheme and a similar implementation as above.

TextButton(
  onPressed: () async {
    String telephoneNumber = '+2347012345678';
    String smsUrl = "sms:$telephoneNumber";
    if (await canLaunch(smsUrl)) {
        await launch(smsUrl);
    } else {
        throw "Error occured trying to send a message that number.";
    }
    child: const CustomWidget(
      icon: Icons.textsms,
      label: 'Send an SMS',
    )