[Flutter] Open web browser by url_launcher

2022-05-13 hit count image

Let's see how to open the web browser or open the app to send an email or call by url_launcher in Flutter.

Outline

In this blog post, I will introduce how to open the web browser, send an email or call a phone number by url_launcher in Flutter.

You can see full source code of this blog post on the link below.

Install url_launcher

To check how to use url_launcher in Flutter, execute the following command to create a new Flutter project.

flutter create url_launcher_example

And then, execute the following command to install url_launcher in the project.

flutter pub add url_launcher

Next, let’s see how to use url_launcher.

Configuration

To use url_launcher, you need to configure the following.

iOS

To use url_launcher in iOS, open the ios/Runner/Info.plist file and modify it like the below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>https</string>
    <string>http</string>
  </array>
</dict>
</plist>

Android

To use url_launcher in Android, open the android/app/src/main/AndroidManifest.xml file and modify it like the below.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.url_launcher_example">
    <queries>
        <!-- If your app opens https URLs -->
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <!-- If your app makes calls -->
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel" />
        </intent>
        <!-- If your sends SMS messages -->
        <intent>
            <action android:name="android.intent.action.SENDTO" />
            <data android:scheme="smsto" />
        </intent>
        <!-- If your app sends emails -->
        <intent>
            <action android:name="android.intent.action.SEND" />
            <data android:mimeType="*/*" />
        </intent>
    </queries>

   <application>
        ...
    </application>
</manifest>

How to use

After installing and configuring the url_launcher, you can use the launchUrl function to open the web browser like the below.

import 'package:url_launcher/url_launcher.dart';
...
launchUrl(
  Uri.parse('https://dev-yakuza.posstree.com/en/'),
);

As you can see, you can generate the Uri, which is used in launchUrl function, with the string. And also, you can generate it with the constructor like the below.

// https://play.google.com/store/apps/details?id=com.google.android.tts
Uri(
  scheme: 'https',
  host: 'play.google.com',
  path: 'store/apps/details',
  queryParameters: {"id": 'com.google.android.tts'},
),

Also, you can use the canLaunchUrl function to check the URL can be executed or not.

const url = Uri.parse('https://dev-yakuza.posstree.com/en/');
if (await canLaunchUrl(url)) {
  launchUrl(url);
}

And, you can use the following URL to open the other apps.

  • Email: launchUrl(Uri.parse('mailto:[email protected]?subject=Hello&body=Test'));
  • Tel: launchUrl(Uri.parse('tel:+1 555 010 999'));
  • SMS: launchUrl(Uri.parse('sms:5550101234'));
  • Google Play store App page: launchUrl(Uri.parse('http://play.google.com/store/apps/details?id=com.google.android.tts'));

Example

To check how to use url_launcher in Flutter, open the lib/main.dart file and modify it like the below.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('URL Launcher'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                final url = Uri.parse(
                  'https://dev-yakuza.posstree.com/en/',
                );
                if (await canLaunchUrl(url)) {
                  launchUrl(url);
                } else {
                  // ignore: avoid_print
                  print("Can't launch $url");
                }
              },
              child: const Text('Web Link'),
            ),
            ElevatedButton(
              onPressed: () async {
                final url = Uri(
                  scheme: 'mailto',
                  path: '[email protected]',
                  query: 'subject=Hello&body=Test',
                );
                if (await canLaunchUrl(url)) {
                  launchUrl(url);
                } else {
                  // ignore: avoid_print
                  print("Can't launch $url");
                }
              },
              child: const Text('Mail to'),
            ),
            ElevatedButton(
              onPressed: () async {
                final url = Uri.parse('tel:+1 555 010 999');
                if (await canLaunchUrl(url)) {
                  launchUrl(url);
                } else {
                  // ignore: avoid_print
                  print("Can't launch $url");
                }
              },
              child: const Text('Tel'),
            ),
            ElevatedButton(
              onPressed: () async {
                final url = Uri.parse('sms:5550101234');
                if (await canLaunchUrl(url)) {
                  launchUrl(url);
                } else {
                  // ignore: avoid_print
                  print("Can't launch $url");
                }
              },
              child: const Text('SMS'),
            ),
          ],
        ),
      ),
    );
  }
}

When you press the button on the screen, you can see the app is opened depending on the URL.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () async {
        final url = Uri.parse(
          'https://dev-yakuza.posstree.com/en/',
        );
        if (await canLaunchUrl(url)) {
          launchUrl(url);
        } else {
          // ignore: avoid_print
          print("Can't launch $url");
        }
      },
      child: const Text('Web Link'),
    ),
    ElevatedButton(
      onPressed: () async {
        final url = Uri(
          scheme: 'mailto',
          path: '[email protected]',
          query: 'subject=Hello&body=Test',
        );
        if (await canLaunchUrl(url)) {
          launchUrl(url);
        } else {
          // ignore: avoid_print
          print("Can't launch $url");
        }
      },
      child: const Text('Mail to'),
    ),
    ElevatedButton(
      onPressed: () async {
        final url = Uri.parse('tel:+1 555 010 999');
        if (await canLaunchUrl(url)) {
          launchUrl(url);
        } else {
          // ignore: avoid_print
          print("Can't launch $url");
        }
      },
      child: const Text('Tel'),
    ),
    ElevatedButton(
      onPressed: () async {
        final url = Uri.parse('sms:5550101234');
        if (await canLaunchUrl(url)) {
          launchUrl(url);
        } else {
          // ignore: avoid_print
          print("Can't launch $url");
        }
      },
      child: const Text('SMS'),
    ),
  ],
),

Check

When you execute the code, you can see the following screen.

Flutter - url_launcer example

When you press the Web Link button, you can see the web browser is opened.

Flutter - url_launcer browser example

When you press the Mail to button, you can see the email app is opened.

Flutter - url_launcer Mailto example

When you press the Tel button, you can see the calling app is opened.

Flutter - url_launcer Tel example

When you press the SMS button, you can see the SMS app is opened.

Flutter - url_launcer SMS example

Complted

Done! we’ve seen how to use url_launcher to open the browser by URL. Also, we’ve seen how to open the other apps by URL with email, telephone number, and SMS.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku. 지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts