FlutterでURLSchemeを使って他のアプリ(例: Twitter)を開く(開けない場合の回避策も)

Flutterで個人開発をしている村松龍之介と申します。
（仕事ではiOSアプリのネイティブアプリ開発を行っています）

今回は、アプリに自分のTwitterアカウントのリンクを載せようと思いました。
最初は普通にURLを貼って、ブラウザで開くようにしていたのですが、アプリ入ってるならアプリが開いた方が良いよね…と思い実装した備忘録です。

URLを開くためにurl_launcherパッケージを使う

まず、URLを開くために必要な url_launcherパッケージを導入済みでなければ導入します。
url_launcher | Flutter Package

簡単に書きますと、pubspec.yamlファイルのdependenciesに1行追記します。
VS Codeですと、⌘ + S で保存すればflutter pub getが自動で走りますのでインストールできます。
Android Studioでもおそらく同じ🤔

dependencies:
  url_launcher: ^5.4.2 # <-導入時点で最新のバージョンで良いかと思います

他のアプリを開きたいファイル（クラス）に実装します

ここではTwitterのプロフィールページを例に用います。

url_launcherパッケージをインポート

import 'package:url_launcher/url_launcher.dart';

URLを開く

launch(url)関数で引数に設定したURLを開けます。
非同期な関数なのでawaitを使っています。

final url = 'twitter://user?screen_name=riscait' // <-Twitterアプリのユーザープロフ画面を開くURLScheme
await launch(url);

開くことのできないURLが入ってくる可能性がある場合は canLaunch(url)で調べることができます。

if (await canLaunch(url)) {
  await launch(url);
} else {
    // 任意のエラー処理
}

URLを開けなかったときのためのセカンドURLを用意

final url = 'twitter://user?screen_name=riscait' // <-Twitterアプリのユーザープロフ画面を開くURLScheme
final secondUrl = 'https://twitter.com/riscait' // <-Twitterアプリのユーザープロフ画面を開くURL

if (await canLaunch(url)) {
  await launch(url);
} else if (secondUrl != null && await canLaunch(secondUrl)) {
    // 最初のURLが開けなかった場合かつセカンドURLが有って開けた場合
  await launch(secondUrl);
} else {
    // 任意のエラー処理
}

メソッド化

/// 第2引数のURLを開く。開けないURLだった場合は第2引数のURLを開く
Future _launchURL(String url, {String secondUrl}) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else if (secondUrl != null && await canLaunch(secondUrl)) {
      await launch(secondUrl);
    } else {
      // 任意のエラー処理
    }
}

ボタンで使用する一例

RaisedButton(
  child: const Text('Twitterを開く'),
  onPressed: () => _launchURL(
    'twitter://user?screen_name=riscait',
    secondUrl: 'https://twitter.com/riscait',
  ),
),

iOSのためにinfo.plistを編集する

これでAndroidではTwitterアプリがインストールされていれば開かれることを確認しました！
しかし、iOSに対応する場合にはもう一手間必要です。

Android StudioやVS Codeで編集する場合

info.plistを開きます。
下記のように1行追加します。

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>itms</string>
    <string>twitter</string> <!-- この1行を追加 -->
</array>

僕の環境下では LSApplicationQueriesSchemesが既に存在しましたが、なかった場合は、5行全部追記しましょう！

<plist version="1.0">
<dict>
<!-- この間に追記すればOK -->
</dict>

Xcodeで（Property Listとして）開いて編集する場合

LSApplicationQueriesSchemesの一要素としてtwitter等のアプリコードを追加しましょう。

以上、これでiOSでもアプリがインストールされていればアプリが開くようになります。

TwitterのURL Schemeについてはこちらのサイトに詳しく載っておりました💡
【2019】Twitter公式Appのスキーム一覧 │ えぐぷと！

蛇足

ご覧いただきありがとうございました！
蛇足ですが、Flutterアプリをリリースできたので良かったらインストールしてみてもらえると嬉しいです🙇‍♂️
iOS: ‎「レストル-有給休暇管理」をApp Storeで
Android: レストル-有給休暇管理 - Google Play のアプリ