How to Open External URL in a Flutter Mobile App: Step by Step Guide

Opening external URLs is a common feature in mobile apps. As a Flutter developer, you might have encountered situations where you want to let users open a website or a specific link outside your app. In this post, I’ll walk you through how to do it quickly and easily into your flutter mobile app.

Why Open External URLs?

Sometimes, your app needs to show content that’s better viewed in a browser. For example:

• Directing users to your website or social media page.
• Opening a privacy policy or terms and conditions page.
• Redirecting users to a payment gateway or external service.
• Opening another app like google play subscription manager
• Opening email app for sending email directly
• Opening calling app by clicking on number and go to calling app with the number directly.
• Opening SMS app if you want to open SMS app for sending SMS directly

So, Flutter makes this task super simple with the help of a package called url_launcher. It is built by flutter itself, and it is now a separate package.

What Is url_launcher?

The url_launcher package is a popular Flutter plugin that allows your app to open URLs in the device’s default app (Browser, Email, Message, Phone). It’s lightweight, easy to use, and works on both Android and iOS.

Step-by-Step Guide

Here’s how you can use url_launcher to open external URLs in your Flutter app.

1. Add the url_launcher Package

First, include the package in your project by adding it to the pubspec.yaml file:

dependencies:  
  url_launcher: ^6.3.1 # Check pub.dev for the latest version

Then, run the command:

flutter pub get

2. Import the Package

In your Dart file, import the package:

import 'package:url_launcher/url_launcher.dart';

3. Configurations

We need to configure for Anroid and IOS for opening external app with the url.

ISO

Add any 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>
</array>

Android

Add following permission for opening url externally. Go to /android/app/main/AndroidManifest.xml and give following permission.

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

3. Create your widget

Create a widget to open the URL. The launchUrl function handles this:

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //Opening external https url in browser
        ElevatedButton(
          onPressed: () {
            launchUrl(
              Uri.parse('https://siamahnaf.com'),
            );
          },
          child: Text('Click me to Open URL'),
        ),

        //For more details options you can watch my video tutorial
      ],
    );
  }
}

In this widget, I show you all supported url that can be open on any external app such as browser, phone app, sms app, email app.

Supported URL schemes

The provided URL is passed directly to the host platform for handling. The supported URL schemes therefore depend on the platform and installed apps.

Video Tutorial

Wrapping It Up

Opening external URLs in a Flutter app is straightforward with the url_launcher package. It’s a reliable way to improve your app’s functionality and user experience. Whether you’re redirecting users to a website, payment gateway, or social media, this method works like a charm.

So, go ahead and give it a try in your next project! Happy coding! 😊

If you have any questions or run into any issues, feel free to ask in the comments below. I’d love to help!