How to open Flutter Hyperlinks on Web and Mobile?

Hyperlinks (or simply links) are an integral part of the web. There are 3 options to open hyperlinks in Flutter. So, in this article, we will see how to open Flutter Hyperlinks on the Web and Mobile.

How to open Flutter Hyperlinks on Web and Mobile?

Flutter for the web doesn’t allow importing the url_launcher package. If you needed to open a link, you had to use the dart:html package or dart:js. Since the dev channel of Flutter allows targeting the web platform, not much has changed when it comes to opening links. You can still use the above-mentioned packages if the plan is only to target the web. If you plan to target web and mobile you need to use the universal_html package.

1) Opening a link with a dart:html would be like:

import 'dart:html' as html;
void htmlOpenLink() {
  String url = 'https://flutter.dev';
  html.window.open(url, '_blank');
}

**2) Opening a link using dart:js would be like:**

First, edit the index.html file inside the web folder (located on the root level of your Flutter project).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hyperlinks_demo</title>
    <script type="application/javascript">
      function openLink(url, target) { 
        window.open(url, target); 
      } 
    </script>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

Then you have the function that opens the link:

import 'dart:js' as js;
void jsOpenLink() {
  String url = 'https://flutter.dev';
  js.context.callMethod('openLink', [url, '_blank']);
}

As you can see, this would be more tricky to pull off than the previous example but actually does the same thing. However, in the JS function openLink, more functionality can be added if needed.

3) If you plan to target multiple platforms (web and mobile), then the approach would be to use the universal_html package and the url_launcher.

import 'package:url_launcher/url_launcher.dart';
import 'package:universal_html/html.dart' as html;
import 'package:flutter/foundation.dart';
void openLink() async {
  String url = 'https://flutter.dev'; 
  if(kIsWeb) {
    html.window.open(url, '_blank');
  } else {
    if(await canLaunch(url)) {
      launch(url);
    }
  }
}

A quick explanation for the above code:

We’ve imported the needed packages (url_launcher – will enable us to open links on mobile devices, universal_html – will enable us to open links from the web browsers, and foundation will help us decide if our code is running in a web browser or not)
We’ve defined the URL we want to open
We check if the code is running in the web browser using kIsWeb, and if it is, then we use the window.open method.
Otherwise, we check if we can launch the URL (we can still be on a desktop or other type of device) using the async method canLaunch. The reason we’re awaiting is its boolean result. If it returns true, then we call the launch method that will do its magic on the device we’re on.

Options 1 and 2 are fine if you’d like to only target the web platform. If you want to target all the platforms, then option 3 would be the way to go.

Safari issues on iOS and macOS:

The above methods won’t work on Safari (iOS and macOS) if any of the openLink functions are called after waiting for an async operation to end (the call is not synchronized). The solution is to detect if we’re on Safari and if so to just change the window.location.href. Example 2 becomes:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hyperlinks_demo</title>
    <script type="application/javascript">
      function openLink(url, target, isAsync=false) {
        var is_safari = /^(?!.*chrome).*safari/i.test(navigator.userAgent.toLowerCase());
        if (is_safari && isAsync) {
          window.location.href = url;
        } else {
          window.open(url, target);
        } 
      }
    </script>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

Link Target Options

In the above examples, we’ve used _blank as a target window for our URL. Here are the few target options you have when it comes to open a link in the web browser:

_blank – specifies a new window
_self – specifies the current frame in the current window
_parent – specifies the parent of the current frame
_top – specifies the top-level frame in the current window
A custom target name of a window that exists

Now that you’ve got an insight on opening links in Flutter, you can also put a CustomCursor on the widgets that are going to open those, so it makes it more straightforward.

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to open Flutter Hyperlinks on the Web and Mobile. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.