Flutterアプリで外部URLを開く機能を実装する（スキームの設定方法・別タブで開く方法も解説）

はじめに

Flutterで外部のURLを開くには、url_launcherパッケージを使用するのが便利です。このブログ記事では、url_launcherを使ってウェブページ、メールクライアント、電話番号などを開く方法を紹介します。

url_launcherの導入方法

まず、プロジェクトにurl_launcherパッケージを追加する必要があります。pubspec.yamlファイルに次のように記述します。

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.20

その後、ターミナルで次のコマンドを実行してパッケージをインストールします。

flutter pub get

もしくは、次のコマンドでもインストールできます。

flutter pub add url_launcher

URLを開く基本的な使い方

次に、URLを開くための基本的なコードを紹介します。url_launcherをインポートしてから、launchUrl関数を使います。

ElevatedButton(
  onPressed: _launchURL,
  child: Text('Googleを開く'),
);

void _launchURL() async {
  final Uri url = Uri.parse('https://www.google.com');
  if (await canLaunchUrl(url)) {
    await launchUrl(url);
  } else {
    throw 'このURLを開けません: $url';
  }
}

上記のコードでは、ボタンが押されたときにGoogleのウェブページが開かれます。canLaunchUrl関数を使うことで、そのURLが開けるかどうかを事前にチェックすることができます。

電話やメールを開く

url_launcherはウェブページだけでなく、電話やメールのリンクも開くことができます。例えば、電話番号をダイヤルするには次のようにします。

void _makePhoneCall() async {
  final Uri telUrl = Uri(scheme: 'tel', path: '123456789');
  if (await canLaunchUrl(telUrl)) {
    await launchUrl(telUrl);
  } else {
    throw 'この電話番号を開けません: $telUrl';
  }
}

メールクライアントを開く場合も同様に、mailtoスキームを使用します。

void _sendEmail() async {
  final Uri emailUrl = Uri(
    scheme: 'mailto',
    path: 'example@example.com',
    query: 'subject=Flutterでのメール送信&body=こんにちは！',
  );
  if (await canLaunchUrl(emailUrl)) {
    await launchUrl(emailUrl);
  } else {
    throw 'このメールを送信できません: $emailUrl';
  }
}

WEBアプリで別タブでリンクを開く

FlutterをWebアプリとして使用する場合、ユーザーがクリックしたリンクを別タブで開くことができます。この機能は、ユーザーに元のアプリを離れさせずに外部リンクを参照させたいときに便利です。

launchUrl関数にオプションを渡すことで、リンクを新しいタブで開くことができます。

void _launchURLInNewTab() async {
  final Uri url = Uri.parse('https://www.example.com');
  if (await canLaunchUrl(url)) {
    await launchUrl(
      url,
      webOnlyWindowName: '_blank',
    );
  } else {
    throw 'このURLを開けません: $url';
  }
}

上記のコードでは、webOnlyWindowNameオプションに'_blank'を指定することで、新しいタブでURLを開くことができます。

Linkウィジットを使ってリンクを開く

FlutterのWebアプリでは、Linkウィジットを使って簡単にリンクを開くことができます。Linkウィジットを使用することで、より直感的な方法でリンクを新しいタブで開けるようになります。

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

Link(
  uri: Uri.parse('https://www.example.com'),
  target: LinkTarget.blank,
  builder: (context, followLink) => ElevatedButton(
    onPressed: followLink,
    child: Text('別タブで開く'),
  ),
);

上記のコードでは、LinkTarget.blankを指定することで、リンクを新しいタブで開くことができます。この方法は、ボタンやテキストリンクなど様々なウィジェットに対応しており、Webアプリで特に便利です。

launchUrl関数にオプションを渡すことで、リンクを新しいタブで開くことができます。

void _launchURLInNewTab() async {
  final Uri url = Uri.parse('https://www.example.com');
  if (await canLaunchUrl(url)) {
    await launchUrl(
      url,
      webOnlyWindowName: '_blank',
    );
  } else {
    throw 'このURLを開けません: $url';
  }
}

上記のコードでは、webOnlyWindowNameオプションに'_blank'を指定することで、新しいタブでURLを開くことができます。

注意点

url_launcherを使う際には、実機テストが特に重要です。エミュレータやシミュレータでは一部の機能が正常に動作しない場合があります。また、iOSの場合はInfo.plistに適切な設定を追加する必要があります。

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>tel</string>
  <string>mailto</string>
  <string>https</string>
</array>

まとめ

url_launcherは外部リンクや、アプリの一部のコンテンツをWebページで実装する時のリンクを実装する時に便利なライブラリです。