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

この記事からわかること
- Flutter/DartでURLリンクをブラウザで起動させる方法
- url_launcherパッケージの使い方
index
[open]
\ アプリをリリースしました /
環境
- 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_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';
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。