url_launcherプラグインを使用してFlutterでネイティブURLスキームを起動する方法
序章
url_launcher プラグインを使用すると、FlutterアプリケーションでSafariでWebページを開いたり、コンテキストを使用して別のアプリケーションにディープリンクしたりするなどのアクションを実行できます。
この記事では、url_launcher
を使用して、Webページ、地図、および電話番号を起動します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Flutterをダウンロードしてインストールするには。
- Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
- コードエディタ用のプラグインをインストールすることをお勧めします。
AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。
このチュートリアルは、Flutter v1.22.2、Android SDK v31.0.2、およびAndroidStudiov4.1で検証されました。
ステップ1—プロジェクトの設定
Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。
- flutter create url_launcher_example
新しいプロジェクトディレクトリに移動します。
- cd url_launcher_example
flutter create
を使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。
ステップ2—url_launcher
プラグインを追加する
次に、pubspec.yaml
内にurl_launcher
プラグインを追加する必要があります。
dependencies:
flutter:
sdk: flutter
url_launcher: ^6.0.3
これで、iOSまたはAndroidシミュレーター、または選択したデバイスでこれを実行できます。
ステップ3—アプリケーションの足場
次に、コードエディタでmain.dart
を開きます。
このファイルのすべてを、home.dart
にあるHomePage
を指すMaterialApp
に置き換えます。
import 'package:flutter/material.dart';
import 'package:url_launcher_example/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'URL Launcher',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: HomePage(),
);
}
}
次に、新しいhome.dart
ファイルを作成し、次のコード行を追加します。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("URL Launcher"),
),
body: Column(
children: <Widget>[
ListTile(
title: Text("Launch Web Page"),
onTap: () {},
),
],
),
);
}
}
基本アプリケーションを確立したので、url_launcher
の使用を開始できます。
ステップ4—Webページを起動する
url_launcher
はWebページの起動をサポートします。
home.dart
に再度アクセスし、次のコード行を変更します。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("URL Launcher"),
),
body: Column(
children: <Widget>[
ListTile(
title: Text("Launch Web Page"),
onTap: () async {
const url = 'https://google.com';
if (await canLaunch(url)) {
await launch(url, forceSafariVC: false);
} else {
throw 'Could not launch $url';
}
},
),
],
),
);
}
}
launch
関数を呼び出す前に、デバイスcanLaunch
が特定のURLスキームであるかどうかを確認する方法に注目してください。
次に、iOSエミュレーターでアプリケーションを実行し、Webページの起動をクリックします。
この場合、forceSafariVC
をfalse
に設定してlaunch
を呼び出しています。 指定しない場合は、「SafariViewController」を使用します。
iOSとAndroidの両方でアプリケーション内のWebページを(たとえばWebViewとして)開くようにしたい場合は、次のようにします。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("URL Launcher"),
),
body: Column(
children: <Widget>[
// ...
ListTile(
title: Text("Launch Web Page (with Web View)"),
onTap: () async {
const url = 'https://google.com';
if (await canLaunch(url)) {
await launch(url, forceWebView: true);
} else {
throw 'Could not launch $url';
}
},
),
],
),
);
}
}
次に、iOSエミュレーターを使用してアプリケーションを実行し、 Webページの起動(Webビュー付き)をクリックします。
これで、Webページにurl_launcher
を使用できます。
ステップ5—GoogleマップとAppleマップを起動する
url_launcher
はマップの起動をサポートしています。
home.dart
に再度アクセスして、緯度と経度を設定します。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
final String lat = "37.3230";
final String lng = "-122.0312";
// ...
}
注:実際のアプリケーションでこれを実行する場合は、ジオコーディングとジオロケーターを利用してユーザーの現在地を特定することができます
次に、comgooglemaps:
およびhttps:
URLスキームで使用できる新しいListTile
を追加できます。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
final String lat = "37.3230";
final String lng = "-122.0312";
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("URL Launcher"),
),
body: Column(
children: <Widget>[
// ...
<^>ListTile(
title: Text("Launch Maps"),
onTap: () async {
final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";
if (await canLaunch(googleMapsUrl)) {
await launch(googleMapsUrl);
}
if (await canLaunch(appleMapsUrl)) {
await launch(appleMapsUrl, forceSafariVC: false);
} else {
throw "Couldn't launch URL";
}
},
),
],
),
);
}
}
次に、iOSエミュレーターでアプリケーションを実行し、マップの起動をクリックします。
これで、Webページにurl_launcher
を使用できます。
ステップ6—電話の起動
url_launcher
は電話の開始をサポートします。
home.dart
に再度アクセスして、電話番号を設定します。
telephoneNumber
を追加しましょう:
class HomePage extends StatelessWidget {
final String lat = "37.3230";
final String lng = "-122.0312";
final String telephoneNumber = "01817658822";
// ...
}
次に、tel:
URLスキームで使用できる新しいListTile
を追加できます。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatelessWidget {
final String lat = "37.3230";
final String lng = "-122.0312";
final String telephoneNumber = "01817658822";
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("URL Launcher"),
),
body: Column(
children: <Widget>[
// ...
ListTile(
title: Text("Launch Telephone"),
onTap: () async {
String telephoneUrl = "tel:$telephoneNumber";
if (await canLaunch(telephoneUrl)) {
await launch(telephoneUrl);
} else {
throw "Can't phone that number.";
}
},
),
],
),
);
}
}
次に、デバイスでアプリケーションを実行し、電話をクリックします。
注: url_launcher
のドキュメントで指摘されているように、tel
およびその他のURLスキームには、それらをサポートするアプリがないシミュレーターの制限があります。
これで、電話番号にurl_launcher
を使用できます。
結論
この記事では、url_launcher
を使用して、Webページ、地図、および電話番号を起動しました。
Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。