[Flutter] Using url_launcher to open phone default browser on iOS

2022-05-13 hit count image

Let's see how to use url_launcher to open the web link on the default browser, that is outside the app, instead of the browser in the app on Flutter.

Outline

In this blog post, I will introduce how to use url_launcher to open the web link on the default browser, that is outside the app, instead of the browser in the app on Flutter.

If you want to know basic useages of url_launcher, please see the previous blog post.

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

Install url_launcher

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

flutter create url_launcher_external_link

And then, execute the following command to install the url_launcher package.

# cd url_launcher_external_link
flutter pub add url_launcher

Next, let’s see how to use url_launcher to open the browser outside the app.

Configuration

To use url_launcher to open the web brower, you need to configure the followings.

iOS

To use url_launcher on 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 on 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>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
    </queries>

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

Open browser with forceSafariVC option

To use url_launcher to open the external browser, 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 demo'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open'),
          onPressed: () async {
            final url = Uri.parse('https://dev-yakuza.posstree.com/en/');
            if (await canLaunchUrl(url)) {
              launchUrl(url, mode: LaunchMode.externalApplication);
            }
          },
        ),
      ),
    );
  }
}

When you execute the code, you can see the Open button` on the center of screen like the below.

Flutter - url_launcer external link example

Next, when you press the Open button, you can see the web browser is opend inside the app like the below.

Flutter - url_launcer external link browser in app

To fix this, open the lib/main.dart file and modify it like the below.

...
onPressed: () async {
  ...
  launchUrl(url, mode: LaunchMode.externalApplication);
  ...
},
...

When you open the browser with the launchUrl function, you can set mode to the LaunchMode.externalApplication option to open the browser outside the app instead of the inside the app.

When you refresh the app and press the open button, you can see the browser is opend outside the app like the below.

Flutter - url_launcer external link default browser

Completed

Done! we’ve seen how to open the web link to the browser outside the app insted of the browser in the app.

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