Displaying Real Links in Flutter Web Using the url_launcher Link Widget

Introduction

I recently discovered that there is a widget called Link in url_launcher, so I'm sharing this article about it.
In conclusion, it seems like a good idea to use this when using Flutter Web.
https://pub.dev/documentation/url_launcher/latest/link/Link-class.html

Practice

Widget Description

A widget that renders a real link on the web, and uses WebViews in native platforms to open links.

It says, "A widget that renders a real link on the web, and uses WebViews in native platforms to open links." 👀

How to Use

When opening a URL in Flutter, it's common to prepare a button and call launchUrl in onPressed. This time, I'll rewrite a case where we open a URL with an IconButton using the Link widget.

1. Set the uri of the Link widget to the result of Uri.parse on the URL string you want to open.
2. Set the return value of the builder to the original button.
3. Set onPressed to the second argument of the builder (followLink).
4. (Optional) Set target to LinkTarget.blank.

// Original implementation
IconButton(
  tooltip: 'Open Twitter',
  onPressed: () => launchUrlString('https://twitter.com/K9i_apps'),
  icon: const Icon(
    SimpleIcons.twitter,
  ),
),
// Implementation using Link
Link(
  uri: Uri.parse('https://twitter.com/K9i_apps'),
  target: LinkTarget.blank,
  builder: (context, followLink) => IconButton(
    tooltip: 'Open Twitter',
    onPressed: followLink,
    icon: const Icon(
      SimpleIcons.twitter,
    ),
  ),
),
```text

#### About target

You can configure how the URL is opened.
For Web, using `defaultTarget` or `self` opens the URL in the same tab where the Flutter app is running, while `blank` opens the URL in a new tab.

```dart
  /// Use the default target for each platform.
  ///
  /// On Android, the default is [blank]. On the web, the default is [self].
  ///
  /// iOS, on the other hand, defaults to [self] for web URLs, and [blank] for
  /// non-web URLs.
  static const LinkTarget defaultTarget =
      LinkTarget._(debugLabel: 'defaultTarget');

  /// On the web, this opens the link in the same tab where the flutter app is
  /// running.
  ///
  /// On Android and iOS, this opens the link in a webview within the app.
  static const LinkTarget self = LinkTarget._(debugLabel: 'self');

  /// On the web, this opens the link in a new tab or window (depending on the
  /// browser and user configuration).
  ///
  /// On Android and iOS, this opens the link in the browser or the relevant
  /// app.
  static const LinkTarget blank = LinkTarget._(debugLabel: 'blank');

Differences in Display

I checked the difference in display between using and not using Link.
In a UI with IconButtons lined up as shown below, only the leftmost button uses Link.

When right-clicking the button using Link:

When right-clicking the button not using Link:

As you can see from the screenshots, the display changed when using Link.

Checking with Developer Tools

When using Developer Tools, I found that an <a> tag was set for the one using Link.

Summary

Since using the Link widget allows actual links to be displayed, it seems better to use it if you are using Flutter Web.