JINMUSOFTWARE

JINMUSOFTWARE

url_launcherの使い方

公開日: / 最終更新日: / カテゴリ: Flutter / 投稿者: matsuda
Flutter

Flutterのプラグイン「url_launcher」のお話です。

url_launcherとは？

url_launcher | Flutter package
Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.
pub.dev

Flutterのプラグインです。

外部リンクを設置することができます。

使い方

install

flutter pub add url_launcher

VSCodeのターミナルで実行します。

pubspec.yamlファイルを確認します。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  url_launcher: ^6.3.1

Version 6.3.1 がインストールされました。

Import

import 'package:url_launcher/url_launcher.dart';

今回は、main.dartにimport文を追加しておきましょう。

実装

公式サンプルの例

final Uri _url = Uri.parse('https://www.jinmusoftware.com/');

Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}

デフォルトだと内部ブラウザのようなものが起動します。

外部ブラウザを起動する場合は「mode」を指定する必要があります。

では、modeに ”externalApplication” を指定してみましょう。

final Uri _url = Uri.parse('https://www.jinmusoftware.com/');

Future<void> _launchUrl() async {
  if (!await launchUrl(
    _url,
    mode: LaunchMode.externalApplication,
  )) {
    throw Exception('Could not launch $_url');
  }
}

これで外部ブラウザが起動するようになりました。

説明

Uri

https://api.flutter.dev/flutter/dart-core/Uri-class.html

final Uri _url = Uri.parse('https://www.jinmusoftware.com/');

url文字列はそのまま使用せず、uriオブジェクトを作成します。

uriオブジェクトはurl文字列を扱いやすくしてくれますね。

以下のようなプロパティにアクセスできます。

  • uri.scheme -> https
  • uri.host -> www.jinmusoftware.com

launchUrl

Future<bool> launchUrl(
  Uri url, {
  LaunchMode mode = LaunchMode.platformDefault,
  WebViewConfiguration webViewConfiguration = const WebViewConfiguration(),
  BrowserConfiguration browserConfiguration = const BrowserConfiguration(),
  String? webOnlyWindowName,
})

返り値

bool型です。ブラウザが無事起動できたらtrueを返します。

失敗したら、falseを返すか、例外（PlatformException）を投げてきます。

Uri

uriオブジェクトが必要です。

LaunchMode

LaunchModeプロパティには、ブラウザの起動方法を指示します。

  • platformDefault：urlの起動方法はプラットフォームに任せる
  • inAppWebView：アプリ内のWebビュー
  • inAppBrowserView：アプリ内のブラウザビュー
  • externalApplication：外部ブラウザ
  • externalNonBrowserApplication：ブラウザ以外の外部アプリ

WebViewConfiguration

起動ブラウザの制限を設定します。

  • JavaScript
  • DomStrage
  • 追加のヘッダー

BrowserConfiguration

Web ページのタイトルを表示するかどうか

webOnlyWindowName

新しいタブで開くか、既存タブで開くか

これはWebページと同じですね。

  • “_blank” ：opens the new URL in a new tab.
  • “_self” ：opens the new URL in the current tab.

コード例

今回のコードでは、端末側のデフォルトのブラウザ（外部ブラウザ）で起動したい為に、次のような引数を指定しました。

launchUrl(
  _url,
  mode: LaunchMode.externalApplication,
)

補足

どこで使用できるのか？

ボタン等のWidgetで使用できます。

クリックしたらブラウザを開くようにするには、onPressedや, onTap, などに記述します。

  • GestureDetector…onTap
  • Inkwell…onTap
  • ElevatedButton…onPressed
  • FloatingActionButton…onPressed
  • などなど

ブラウザを開きたいだけだがSchemeの設定が必要なのか？

公式ページを確認すると、sms、tellなどの場合は、追加の設定が必要ですが、httpsの場合は不要です。

iOS,Simulatorではそこそこエラーがでます

ブラウザを開いて、表示しきる前に戻ると、launchUrlはfalseを返したり例外を投げてきます。

そうなると調子が悪くなりブラウザの挙動がおかしくなります。この場合は、Erase All Content and Setting… を実行してみましょう。

  • Simulator -> Device -> Erase All Content and Setting,,,

テスト中は軽いページのurlにしておくのがよきでしょう。

おわり