Tutorial

How To Launch Native URL Schemes in Flutter with the url_launcher Plugin

Updated on May 4, 2021
How To Launch Native URL Schemes in Flutter with the url_launcher Plugin

Introduction

The url_launcher plugin allows your Flutter application to perform actions like opening a web page in Safari or deep-linking into another application with context.

In this article, you will use url_launcher to launch a web page, a map, and a telephone number.

Prerequisites

To complete this tutorial, you will need:

This tutorial was verified with Flutter v1.22.2, Android SDK v31.0.2, and Android Studio v4.1.

Step 1 — Setting Up the Project

Once you have your environment set up for Flutter, you can run the following to create a new application:

  1. flutter create url_launcher_example

Navigate to the new project directory:

  1. cd url_launcher_example

Using flutter create will produce a demo application that will display the number of times a button is clicked.

Step 2 — Adding the url_launcher Plugin

Next up, we’ll need to add the url_launcher plugin within our pubspec.yaml:

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^6.0.3

We can now go ahead and run this on the iOS or Android simulator or device of your choice.

Step 3 — Scaffolding the Application

Now, open main.dart in your code editor.

Replace everything in this file with with a MaterialApp that points at a HomePage which can be found at home.dart:

lib/main.dart
import 'package:flutter/material.dart';
import 'package:url_launcher_example/home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Launcher',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: HomePage(),
    );
  }
}

Next, create a new home.dart file and add the following lines of code:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("Launch Web Page"),
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

Now that we’ve established a base application, we can start using url_launcher.

Step 4 — Launching Web Pages

url_launcher supports launching web pages.

Revisit home.dart and modify the following lines of code:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("Launch Web Page"),
            onTap: () async {
              const url = 'https://google.com';

              if (await canLaunch(url)) {
                await launch(url, forceSafariVC: false);
              } else {
                throw 'Could not launch $url';
              }
            },
          ),
        ],
      ),
    );
  }
}

Notice how we’re checking to see if the device canLaunch a particular URL scheme prior to calling the launch function.

Then run the application with the iOS emulator, and click Launch Web Page:

Screenshot of the url_launcher launching a browser with Google.

In this case, we’re calling launch with forceSafariVC set to false. When unspecified, it will use “Safari View Controller”.

If we wanted both iOS and Android to open the web page inside the application (as a WebView, for example), we’d do something like this:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          ListTile(
            title: Text("Launch Web Page (with Web View)"),
            onTap: () async {
              const url = 'https://google.com';

              if (await canLaunch(url)) {
                await launch(url, forceWebView: true);
              } else {
                throw 'Could not launch $url';
              }
            },
          ),
        ],
      ),
    );
  }
}

Then run the application with the iOS emulator, and click Launch Web Page (with Web View):

Screenshot of the url_launcher launching a browser with Google in WebView style.

Now you can use url_launcher for web pages.

Step 5 — Launching Google Maps and Apple Maps

url_launcher supports launching maps.

Revisit home.dart and set latitude and longitude:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  // ...
}

Note: If you want to do this in a real application, you may want to take advantage of geocoding and geolocator to determine the user’s current location

We can then add a new ListTile which can be used with the comgooglemaps: and https: URL schemes:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          <^>ListTile(
            title: Text("Launch Maps"),
            onTap: () async {
              final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
              final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";

              if (await canLaunch(googleMapsUrl)) {
                await launch(googleMapsUrl);
              }
              if (await canLaunch(appleMapsUrl)) {
                await launch(appleMapsUrl, forceSafariVC: false);
              } else {
                throw "Couldn't launch URL";
              }
            },
          ),
        ],
      ),
    );
  }
}

Then, run the application with the iOS emulator, and click Launch Maps:

Screenshot of the url_launcher launching a map with the user's current location indicated.

Now you can use url_launcher for web pages.

Step 6 — Launching Telephone

url_launcher supports launching phone calls.

Revisit home.dart and set a telephone number:

Let’s add a telephoneNumber:

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  final String telephoneNumber = "01817658822";

  // ...
}

We can then add a new ListTile which can be used with the tel: URL scheme:

lib/home.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class HomePage extends StatelessWidget {
  final String lat = "37.3230";
  final String lng = "-122.0312";

  final String telephoneNumber = "01817658822";

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("URL Launcher"),
      ),
      body: Column(
        children: <Widget>[
          // ...
          ListTile(
            title: Text("Launch Telephone"),
            onTap: () async {
              String telephoneUrl = "tel:$telephoneNumber";

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

Then, run the application with a device and click Telephone:

Screenshot of the url_launcher launching a phone number with prompts for contact and SMS.

Note: As pointed out by the url_launcher documentation, there are limitations with tel and other URL schemes in simulators without apps that support them.

Now you can use url_launcher for telephone numbers.

Conclusion

In this article, you used url_launcher to launch a web page, a map, and a telephone number.

If you’d like to learn more about Flutter, check out our Flutter topic page for exercises and programming projects.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
1 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

you missing how to load local json string data in the url_launcher

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more