How to implement the Url launcher in Flutter

In this guide, we will learn how to implement the URL launcher in a flutter. While developing mobile applications, there are so many times when we have to interact outside of our applications. So to achieve this Flutter provides an easy way to use url_launcher package.

The URL Launcher is a Flutter plugin that allows your applications to launch web browsers, map applications, dialer applications, mail applications, and so on. The URL Launcher plugin works by creating intents to open applications using different URL schemes.

Related guide: How To Implement Bottom NavigationBar In Flutter

To set up the Url launcher in our application. At first, we should do the following things.

Step1: Add the dependency

Start by adding the dependency to the pubspec.yml file

dependencies:
   url_launcher: ^6.1.4
or 
We can do that by running the following command in our terminal:
$ flutter pub add url_launcher

The url_launcher the plugin will be added as a dependency to our pubspec.yaml file as a result.

Configuration

IOS

Add any URL schemes passed to canLaunchUrl as LSApplicationQueriesSchemes entries in your Info.plist file, otherwise it will return false.

Example:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>sms</string>
  <string>tel</string>
</array>

Andriod

Add any URL schemes passed to canLaunchUrl as <queries> entries in your AndroidManifest.xml, otherwise, it will return false in most cases starting on Android 11 (API 30) or higher. A <queries> the element must be added to your manifest as a child of the root element.

Example:

<queries>
  <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
</queries>

Let’s take an example of how we can implement the URL launcher in our flutter application.

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

class URLScreen extends StatefulWidget {
  const URLScreen({Key? key}) : super(key: key);

  @override
  State<URLScreen> createState() => _URLScreenState();
}

class _URLScreenState extends State<URLScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Url Launcher in Flutter'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: _lauchedfb,
              child: const Text('open facebook'),
            ),
          ),
          Center(
            child: ElevatedButton(
              onPressed: _launchedNumber,
              child: const Text('Dial Number'),
            ),
          ),
        ],
      ),
    );
  }

 _launchedNumber() async {
    String telephoneNumber = '9863180182';
    String telephoneUrl = "tel:$telephoneNumber";
    if (await canLaunchUrl(Uri.parse(telephoneUrl))) {
      await launchUrl(Uri.parse(telephoneUrl), mode: LaunchMode.externalNonBrowserApplication);
    } else {
      throw "Error occured trying to call that number.";
    }
  }
 _lauchedfb() async {
      String url =
        'fb://facewebmodal/f?href=https://www.facebook.com/sagar.koju/';
try {
      bool launched = await launchUrl(Uri.parse(url));
      
} catch (e) {
      print(e);
      
    }
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

If we click the “open Facebook” button, we will see the output which is given below.

If we click the “Dial Number” button, we will see the output which is given below.

Thank you for reading the Guide about How to implement the URL Launcher in Flutter.