Launch URLs in Flutter: A Step-by-Step Guide with url_launcher

Unlock the Power of URL Launcher in Flutter

Getting Started with URL Launcher

The URL Launcher plugin is a game-changer for Flutter developers, allowing you to launch web browsers, map applications, dialer applications, mail applications, and more from within your app. But how does it work? The plugin creates intents to open applications using different URL schemes. In this article, we’ll explore how to harness the power of URL Launcher to open a web browser, dialer, mail, and map apps.

Prerequisites

Before we dive in, make sure you have the following set up:

• Any IDE with the Flutter SDK installed (e.g., Android Studio, VSCode)
• Basic knowledge of Dart and Flutter

Project Setup

Create a new Flutter project by running the following command in your terminal:


flutter create my_app


Next, add the url_launcher plugin as a dependency to your project by running:


flutter pub add url_launcher


This will add the plugin to your pubspec.yaml file.

Building the UI

Copy and paste the code below into your main.dart file to create a basic UI for your application:

“`dart
import ‘package:flutter/material.dart’;
import ‘package:urllauncher/urllauncher.dart’;

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘URL Launcher Demo’,
home: Scaffold(
appBar: AppBar(
title: Text(‘URL Launcher Demo’),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: Text(‘Open a URL’),
onPressed: () async {
// Launch URL code here
},
),
ElevatedButton(
child: Text(‘Make a Call’),
onPressed: () async {
// Launch dialer code here
},
),
ElevatedButton(
child: Text(‘Send an Email’),
onPressed: () async {
// Launch email code here
},
),
ElevatedButton(
child: Text(‘Open Maps’),
onPressed: () async {
// Launch maps code here
},
),
],
),
),
),
);
}
}
“`

URL Launcher Async Functions

The URL Launcher plugin provides two essential asynchronous functions: canLaunch and launch. The canLaunch function returns a boolean value indicating whether a device can handle a certain URL scheme. The launch function requires a String argument that serves as the URL, parsing the given URL string and passing it to the underlying platform for processing.

Customizing the Launch Experience

Both Android and iOS platforms offer optional parameters to customize the launch experience. For Android, you can use forceWebView, enableJavaScript, and enableDomStorage to control how the URL is opened. On iOS, you can use forceSafariVC and statusBarBrightness to customize the launch experience.

Putting it All Together

Now that we’ve explored the URL Launcher plugin, let’s see how we can implement it in our application. We’ll create examples for launching a webpage, making a phone call, sending an email, and opening maps.

Launching a Webpage

To launch a webpage, we’ll use the canLaunch function to check if the device can handle the URL scheme before invoking the launch function.

dart
onPressed: () async {
if (await canLaunch('https://www.example.com')) {
await launch('https://www.example.com');
} else {
throw 'Could not launch URL';
}
}


Launching a Telephone Dialer App

To initiate a phone call, we’ll use the tel: URL scheme followed by a telephone number.

dart
onPressed: () async {
if (await canLaunch('tel:+1234567890')) {
await launch('tel:+1234567890');
} else {
throw 'Could not launch dialer';
}
}


Launching a Mail App

To send an email, we’ll use the mailto: URL scheme and pass in the recipient’s email address, subject line, and body of the email.

dart
onPressed: () async {
final emailUrl =
'ailto:[email protected]?subject=Hello&body=This%20is%20a%20test%20email';
if (await canLaunch(emailUrl)) {
await launch(emailUrl);
} else {
throw 'Could not launch email';
}
}


Launching Maps

To view a location on a map, we’ll use the geo: URL scheme and pass in the location’s latitude and longitude values.

dart
onPressed: () async {
final mapUrl = 'geo:37.7749,-122.4194';
if (await canLaunch(mapUrl)) {
await launch(mapUrl);
} else {
throw 'Could not launch maps';
}
}


Take Your App to the Next Level

With the URL Launcher plugin, you can create a seamless user experience by interfacing with other applications from within your app. By following these examples, you’ll be able to implement the plugin to fit each use case. Happy coding!