【Flutter/Dart】URLをブラウザ起動で開く方法!url_launcherパッケージの使い方

【Flutter/Dart】URLをブラウザ起動で開く方法!url_launcherパッケージの使い方

この記事からわかること

  • Flutter/DartURLリンクブラウザ起動させる方法
  • url_launcherパッケージ使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

URLリンクをブラウザ起動で開く方法

FlutterでURLリンクをブラウザを起動させて開くにはurl_launcherというパッケージを使用します。デフォルトではこのパッケージを組み込まれていないのでflutter pub add url_launcherコマンドを実行して導入しておく必要があります。

$ flutter pub add url_launcher

url_launcherとは?

url_launcherURLリンクをブラウザを起動させて開くためのパッケージです。ただこのURLを読み込んで動作させるという特徴を使用して他にも以下のことが可能なようです。

公式リファレンス:サポートされている URL スキーム

上記はurl_launcherhttpsだけでなくカスタムスキームもサポートしているために実装可能になっています。カスタムスキームの実装はiOS/Androidともに以下の記事を参考にしてください。

url_launcherの使い方

実際にURLでブラウザを起動させるにはlaunchUrlメソッドを使用します。引数にはUri型で対象のURLを指定します。その前に有効なURLかどうかをチェックするcanLaunchUrlメソッドを使用しておくと安全です。

import 'package:url_launcher/url_launcher.dart';

void _launchURL() async {
  const url = 'https://appdev-room.com/';
  final Uri uri = Uri.parse(url);
  // 有効なURLかどうかをチェック
  if (await canLaunchUrl(uri)) {
    // ブラウザ起動
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    throw 'Could not launch $url';
  }
}

launchUrlメソッド

以前はlaunchメソッドでしたが非推奨になり、launchUrlメソッドに置き換わりました。定義を確認してみると引数からLaunchModeを設定することが可能になっています。


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

LaunchMode

LaunchModeで指定できる値は以下の5種類です。externalApplicationを指定してるとブラウザアプリでURLが起動します。

enum LaunchMode {
  /// URL の開き方をプラットフォームの実装に任せる
  platformDefault,

  /// アプリ内の WebView(例:Android / iOS WebView)で URL を読み込む
  inAppWebView,

  /// アプリ内の WebView(例:Android Custom Tabs、SFSafariViewController)で URL を読み込む
  inAppBrowserView,

  /// URL を OS に渡し、他のアプリケーションで処理させる
  externalApplication,

  /// URL を OS に渡し、ブラウザ以外のアプリケーションで処理させる
  externalNonBrowserApplication,
}

inAppWebView(アプリ内WebViewで起動)

【Flutter/Dart】URLをブラウザ起動で開く方法!url_launcherパッケージの使い方

platformDefaultinAppBrowserViewを指定しても上記と同じでした。またWebViewとありますがアプリ内にWebViewを実装していなくても問題はないようです。

externalApplication(ブラウザアプリで起動)

【Flutter/Dart】URLをブラウザ起動で開く方法!url_launcherパッケージの使い方

電話やメール、マップなど他のアプリを起動する

電話やメール、マップなど他のアプリを起動したい場合でもlaunchUrlメソッドを使用します。起動できるかどうかも変わらずcanLaunchUrlメソッドでチェック可能です。

void _openMap() async {
  const mapUrl = 'geo:37.7749,-122.4194'; // 緯度と経度で指定
  if (await canLaunchUrl(mapUrl)) {
    // マップアプリを開く
    await launchUrl(mapUrl, mode: LaunchMode.externalApplication);
  } else {
    throw 'Could not launch $mapUrl';
  }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index