Flutter: How to launch apps using the url_launcher plugin?

by Maitri Raval 10 days ago in how to

A Flutter plugin for launching a URL in the mobile platform.

Flutter: How to launch apps using the url_launcher plugin?
image source: by Auther

In this article, we will learn to use the url_laucher plugin. This will help you to call an external URL, make a call, send an email, send an SMS, send whatsapp message, redirect to Map from your app.

Flutter provides the url_launcher plugin to interact with the app outside of your own app.

If you are lazy like me then you can check out this video and leave. Keep scrolling, if it seems interesting!! We will understand the whole concept by example, in no time you will get the knowledge to implement this package in your project.

Supported URL schemes by the plugin:

The launch method is using a string argument that contains a URL. We can format the URL with different URL schemes.

This plugin provides the launch method. It uses a string argument that contains a URL. We can format the URL with different URL schemes.

Below are the Common schemes supported by both iOS and Android:

To open a URL in the browser: http:<URL> , https:<URL>

To create an Emai: mailto:<email address>?subject=<subject>&body=<body>

To make a phone call: tel:<phone number>

To send an SMS: sms:<phone number>

Encoding URLs:

What if we want to open an external app and send a message text which contains space and special characters?

For that, we will use Uri classs. It will encode the URL using Uri.parse function.

It will give you the ability to open third-party apps from your app. 

Let's implemnt it in our project.....

Add this plugin in your package's pubspec.yaml file.

dependencies:

flutter:

sdk: flutter

url_launcher: ^5.7.2

Now import the package in your dart file:

import 'package:url_launcher/url_launcher.dart';

Create _customLaunch function:

_customLaunch which will be used to launch various URL schemes. We are using canLaunch function prior to calling launch to check the URL scheme is valid or not.

_customLaunch(data) async {

if(await canLaunch(data)) {

await launch(data);

} else {

throw ("Sorry, could not launch!!");

}

}

Call _customLaunch function:

let's see how we can use this global function to perform certain actions.  

Open a Website: Pass a URL. This is the only required parameter. It will open a URL in the browser.

_customLaunch("https://www.google.com/");

Make a Call: Pass the tel: followed by the number, it will open the default phone app.

_customLaunch('tel:9898786865');

Send an SMS: Pass the sms: followed by the number, it will open the default message app.

_customLaunch('sms:+9898786865');

Send an Email: Pass the mailto: followed by the number, it will open the default mail app.

_customLaunch("mailto:[email protected]");

Send a message on WhatsApp:

1. Import the below package to check the app platform:

import 'dart:io';

2. Create a function to launch Whatsapp:

void launchWhatsApp({@required String phone, @required String message,}) async {

String url() {

if (Platform.isIOS) {

return "whatsapp://wa.me/$phone/?text=${Uri.parse(message)}";

}

else {

return "whatsapp://send?phone=$phone&text=${Uri.parse(message)}";

}

}

_customLaunch(url());

}

3. For iOS, Open Runner.xcworkspace from the ios folder in your package. Add the below key with values in info.plist.

<key>LSApplicationQueriesSchemes</key>

<array>

<string>whatsapp</string>

</array>

4. Make a function call to launch WhatsApp by passing phone: followed by contact number and message: followed by text.

launchWhatsApp(phone: '919898786865', message: "Hello there!!");

Launch Map:

We need to have the latitude and longitude of the place we want to open. Use them to make google and apple map URL.

void launchMap({@required String lat, @required String lng}) async {

String url() {

if (Platform.isIOS) {

return "https://maps.apple.com/?q=$lat,$lng";

} else {

return "comgooglemaps://?center=$lat,$lng";

}

}

_customLaunch(url());

}

Make a function call to launch Map by passing lat: followed by the latitude and lng: followed longitude of the place you want to see on the map.

launchMap(lat: "23.033863", lng: "72.585022");

You can find the entire working source code here:

import 'package:flutter/material.dart';

import 'package:url_launcher/url_launcher.dart';

import 'dart:io'; // for sharing through whatsapp

class UrlLauncherExample extends StatefulWidget {

@override

_UrlLauncherExampleState createState() => _UrlLauncherExampleState();

}

class _UrlLauncherExampleState extends State<UrlLauncherExample> {

_customLaunch(data) async {

if (await canLaunch(data)) {

await launch(data);

} else {

throw ("Sorry, could not launch");

}

}

void launchWhatsApp({

@required String phone,

@required String message,

}) async {

String url() {

if (Platform.isIOS) {

return "whatsapp://wa.me/$phone/?text=${Uri.parse(message)}";

} else {

return "whatsapp://send? phone=$phone&text=${Uri.parse(message)}";

}

}

_customLaunch(url());

}

void launchMap({@required String lat, @required String lng}) async {

String url() {

if (Platform.isIOS) {

return "https://maps.apple.com/?q=$lat,$lng";

} else {

return "comgooglemaps://?center=$lat,$lng";

}

}

_customLaunch(url());

}

@override Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text("Url Launcher"),

),

backgroundColor: Colors.black,

body: SafeArea(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

onPressed: () {

_customLaunch("https://www.google.com/");

},

label: Text("Open a Website", style: TextStyle(fontSize: 18)),

icon: Icon(Icons.web),

color: Colors.white,

textColor: Colors.black,

),

),

SizedBox(

height: 20,

),

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

color: Colors.white,

onPressed: () => setState(() {

_customLaunch('tel:8402053663');

}),

icon: Icon(Icons.call),

label: Text("Call", style: TextStyle(fontSize: 18)),

),

),

SizedBox(

height: 20,

),

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

onPressed: () {

_customLaunch('sms:+8402053663');

},

icon: Icon(Icons.sms),

label: Text("Send an SMS", style: TextStyle(fontSize: 18)),

color: Colors.white,

),

),

SizedBox(

height: 20,

),

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

onPressed: () {

_customLaunch("mailto:[email protected]");

},

label: Text("Send an Email", style: TextStyle(fontSize: 18)),

icon: Icon(Icons.email),

color: Colors.white,

textColor: Colors.black,

),

),

SizedBox(

height: 20,

),

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

onPressed: () {

launchWhatsApp(phone: '919824596079', message: "hello");

},

label: Text("Whats app", style: TextStyle(fontSize: 18)),

icon: Icon(Icons.share),

color: Colors.white,

textColor: Colors.black,

),

),

SizedBox(

height: 20,

),

ButtonTheme(

minWidth: 300,

height: 50,

child: RaisedButton.icon(

onPressed: () {

launchMap(lat: "23.033863", lng: "72.585022");

},

label: Text("Launch Map", style: TextStyle(fontSize: 18)),

icon: Icon(Icons.map),

color: Colors.white,

textColor: Colors.black,

),

)

],

),

)),

),

);

}

}

GitHub Link:

You can view this project from this Github Link.

It's a Wrap:

I hope this article is straightforward enough to provide you the knowledge to implement the url_flutter plugin in your app.

Have a happy coding!!

how to
Maitri Raval
Maitri Raval
Read next: Wearables vs The Virus | João Bocas | Engati Engage
Maitri Raval

A Freelance App Developer and a Flutter explorer

See all posts by Maitri Raval