FlutterでURLへのリンクを作成してアプリ外でWebページを開く

はじめに

FlutterでURLをタップしたらブラウザが開いてそこでURL先を表示したい場合があります。この記事では、Flutter公式のプラグインを使用した実装例をメモします。

できるようになること

この記事で説明する内容によって出来上がるのは以下のGIF画像のように、Flutterで作成するアプリ内にて、指定したURLのリンクをタップしたらスマートフォンのブラウザを開いてWebページを開きます。

上記の実装を以降に記載します。

なお、もしFlutterアプリ内でリンクをクリックしたらアプリの中でそのWebページを表示したい場合については以下にまとめました。

前提と環境

以降に記載するコードを実行した環境は以下になります。

• iOS 15.5
• Xcode 13.4.1
• Flutter 3.0.5 (Dart 2.17.6)

必要なパッケージ

必要なパッケージは以下になります。

dependencies:
  url_launcher: ^6.1.5

該当する部分のコード

該当する部分のコードは以下になります。

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

...(省略)...

Link(
  // 開きたいWebページのURLを指定
  uri: Uri.parse('https://flutter.dev'),
  // targetについては後述
  target: LinkTarget.blank,
  builder: (BuildContext ctx, FollowLink? openLink) {
    return TextButton(
      onPressed: openLink,
      child: const Text(
        'Webサイト表示',
        style: TextStyle(fontSize: 12),
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        // minimumSize:
        //     MaterialStateProperty.all(Size.zero),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
    );
  },
),

...(省略)...

ButtonStyleの中身についてはリンク文字の周りにある余白の指定になります。コメント化/解除して確認してみてください。

targetについて

上記のコードでは、target: LinkTarget.blankと指定しており、この場合はブラウザの新しいタブで指定したURLのWebページを開きます。この記事の冒頭のGIF画像が該当します。

もう１つオプションがあり、target: LinkTarget.selfと指定すると、以下のようにブラウザの１つのタブとしてではなく、一時的に独立したブラウザを開く形になります。

上記はiOSの場合ですが、target: LinkTarget.blankとは異なり、左上に「完了」というボタンがあり、さらに右下にはSafariで開き直すためのSafariアイコンボタンもあります。

アイコンも表示したい場合

以下のようにTextButton.iconを使えばアイコンを一緒に表示できます。

return TextButton.icon(
  onPressed: openLink,
    label: const Text('Webサイト表示'),
    icon: const Icon(Icons.open_in_new),
);

まとめ

Flutterで作成したアプリ外でスマートフォンのブラウザを開いてWebページを開くための実装についてまとめました。