Integrating url_launcher in Flutter Apps

The mobile app development world has moved from fast to ‘impatiently fast’. One essential aspect of faster user interaction is the ability to navigate to external websites or open other apps directly from within your Flutter application.

This is where the url_launcher plugin for Flutter comes into play. This plugin allows you to open URLs in the default web browser of the device. It also allows for ​​opening URLs that launch other apps installed on the device such as emails or social media apps. 

Installing URL Launcher in Flutter

Installation can be done in a whiff by following the code given below: 

Terminal Command

flutter pub add url_launcher

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
	url_launcher: x.y.z.

Supported URL Schemes

url_launcher supports various URL schemes. They are essentially prefixes or protocols that help define how a URL should be handled by Android, iOS or any operating system or apps in general. Common URL Schemes supported by url_launcher include HTTP, HTTPS, mailto, SMS, tel, App Schemes and Custom Schemes. 

Integrating url_launcher

When using the url_launcher package, you can open URLs with these schemes using the launch function. This package will delegate the URL handling to the underlying platform, ensuring compatibility with both Android and iOS. 

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

class MyApp extends StatelessWidget {

  @override Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(
          title: Text('URL Launcher Example'),
        ),

        body: Center(
          child: ElevatedButton(

            onPressed: () {
              _openURL("https://finotes.com/");
            },

            child: Text('Open URL'),

          ),

        ),

      ),

    );

  }

  // Function to open a URL using url_launcher

  void _openURL(String url) async {

    if (await canLaunchUrl(url)) { //Checking if there is any app installed in the device to handle the url.

      await launch(url);

    } else {

      // Handle error

    }

  }

}

Configuring canLaunchUrl in iOS

Make sure to add the URL schemes passed to canLaunchUrl as LSApplicationQueriesSchemes entries in your info.plist file. Otherwise, it will return false.

<key>LSApplicationQueriesSchemes</key>

<array>

  <string>sms</string>

  <string>tel</string>

</array>

Configuring canLaunchUrl in Android

Add the 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. 

<!-- Provide required visibility configuration for API level 30 and above -->

<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>

  <!-- If your application checks for inAppBrowserView launch mode support -->

  <intent>

    <action android:name="android.support.customtabs.action.CustomTabsService" />

  </intent>

</queries>

That’s it for now. For more information on  url_launcher with Flutter, check https://pub.dev/packages/url_launcher/