• 2025/3/26
• 4分

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

＼ アプリをリリースしました ／

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

posted withアプリーチ

環境

• Android Studio：Koala
• Xcode：16.0
• Flutter：3.29.2
• Dart：3.7.2
• url_launcher：6.3.1
• Mac M1：Sonoma 14.6.1

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

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

$ flutter pub add url_launcher

url_launcherとは？

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

• URLリンクをブラウザを起動させて開く
• 電話アプリを起動して電話をかける
• メールアプリを起動してメールを送信する
• SMSアプリを起動してSMSを送信する
• マップアプリを起動してマップを表示する

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

上記はurl_launcherがhttpsだけでなくカスタムスキームもサポートしているために実装可能になっています。カスタムスキームの実装は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で起動)

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

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

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

電話やメール、マップなど他のアプリを起動したい場合でも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';
  }
}

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

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