18
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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 のアプリ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
18
Help us understand the problem. What are the problem?