序章

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用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

  1. flutter create url_launcher_example

新しいプロジェクトディレクトリに移動します。

  1. cd url_launcher_example

flutter createを使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。

ステップ2—url_launcherプラグインを追加する

次に、pubspec.yaml内にurl_launcherプラグインを追加する必要があります。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^6.0.3

これで、iOSまたはAndroidシミュレーター、または選択したデバイスでこれを実行できます。

ステップ3—アプリケーションの足場

次に、コードエディタでmain.dartを開きます。

このファイルのすべてを、home.dartにあるHomePageを指すMaterialAppに置き換えます。

lib / main.dart
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ファイルを作成し、次のコード行を追加します。

lib / 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に再度アクセスし、次のコード行を変更します。

lib / 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ページの起動をクリックします。

Screenshot of the url_launcher launching a browser with Google.

この場合、forceSafariVCfalseに設定してlaunchを呼び出しています。 指定しない場合は、「SafariViewController」を使用します。

iOSとAndroidの両方でアプリケーション内のWebページを(たとえばWebViewとして)開くようにしたい場合は、次のようにします。

lib / 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 (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ビュー付き)をクリックします。

Screenshot of the url_launcher launching a browser with Google in WebView style.

これで、Webページにurl_launcherを使用できます。

ステップ5—GoogleマップとAppleマップを起動する

url_launcherはマップの起動をサポートしています。

home.dartに再度アクセスして、緯度と経度を設定します。

lib / 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を追加できます。

lib / 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";

  
  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エミュレーターでアプリケーションを実行し、マップの起動をクリックします。

Screenshot of the url_launcher launching a map with the user's current location indicated.

これで、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を追加できます。

lib / 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";

  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.";
              }
            },
          ),
        ],
      ),
    );
  }
}

次に、デバイスでアプリケーションを実行し、電話をクリックします。

Screenshot of the url_launcher launching a phone number with prompts for contact and SMS.

注: url_launcherのドキュメントで指摘されているように、telおよびその他のURLスキームには、それらをサポートするアプリがないシミュレーターの制限があります。

これで、電話番号にurl_launcherを使用できます。

結論

この記事では、url_launcherを使用して、Webページ、地図、および電話番号を起動しました。

Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。