🐙

url_launcherのLinkウィジェットを使ってFlutter Webで実際のリンクを表示する

2023/03/02に公開

Flutter

Web

tech

はじめに

最近url_launcherにLinkというウィジェットがあることを知ったので、その共有記事です。
結論からいうとFlutter Webを使う場合はこれを使うと良さそうです。

実践

ウィジェットの説明

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

「ウェブ上の実際のリンクをレンダリングし、ネイティブプラットフォームでWebViewsを使用してリンクを開くウィジェット。」とのことです👀

使い方

FlutterでURLを開くときはボタンを用意して、onPressedでlaunchURLを呼ぶことが多いと思います。今回はIconButtonでURLを開くケースをLinkウィジェットを使って書き換えてみます。

Linkウィジェットのuriに開きたいURLの文字列をUri.parseしたものを設定
builderの返り値を元のボタンにする
onPressedをbuilderの第2引数(followLink)にする
(オプション) targetをLinkTarget.blankにする

// 元の実装
IconButton(
  tooltip: 'Twitterを開く',
  onPressed: () => launchUrlString('https://twitter.com/K9i_apps'),
  icon: const Icon(
    SimpleIcons.twitter,
  ),
),
// Linkを使った実装
Link(
  uri: Uri.parse('https://twitter.com/K9i_apps'),
  target: LinkTarget.blank,
  builder: (context, followLink) => IconButton(
    tooltip: 'Twitterを開く',
    onPressed: followLink,
    icon: const Icon(
      SimpleIcons.twitter,
    ),
  ),
),

targetについて

URLの開き方を設定できます。
Webの場合はdefaultTargetかselfならFlutterアプリが開いてるタブでURLを開く、blankなら新しいタブでURLを開きます。

  /// 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');