Flutterでユニバーサルリンクを実装して特定の画面に遷移させる

QRコードからのゲストログインの機能を作成中。
標準のQRスキャンアプリでスキャンしたらゲストログインできる仕組みにしたかったので、ユニバーサルリンクを実装

PR

実装

ユニバーサルリンクは以下の記事を参考に実装

まず、URLとアプリの紐づけが必要なので、今回はFirebase Hostingで実装

以下のコマンドでFirebase Hostringの初期設定をする

$ firebase init hosting

iOS実装

iOSのユニバーサルリンクは指定のhostの.well-known/apple-app-site-associationに以下のファイルを設置する必要があるので、Firebase Hostringのフォルダに以下のファイルを作成

■ typescript/appLink/public/.well-known/apple-app-site-association

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "7KWTGL2ZDY.com.unicorn.stockkeeper",
        "paths": [
          "*"
        ]
      }
    ]
  }
}

appIDはteam idとbundle idで指定

XcodeでRunner/Info.plistを開いてFlutterDeepLinkingEnabled: Yesで追加

XcodeでSigning & Capabilitiesを開いてAssociated Domainsにapplinks:対象のURLのhostを設定

Androidの実装

AndroidのApp Linksは指定のhostの.well-known/assetlinks.jsonに以下のファイルを設置する必要があるので、Firebase Hostringのフォルダに以下のファイルを作成

■typescript/appLink/public/.well-known/assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.unicorn.stockkeeper",
      "sha256_cert_fingerprints": [
        "B7:FA:3A:2D:DA:29:22:6B:FF:02:40:55:69:E8:6D:8D:54:40:89:CE:69:8C:E6:E3:7C:FF:1B:9B:8E:82:EF:A8"
      ]
    }
  }
]

android/app/src/main/AndroidManifest.xmlに以下を追加

■dart/app/android/app/src/main/AndroidManifest.xml

            <intent-filter android:autoVerify="true">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="http" android:host="stock-keeper-review.web.app" />
                <data android:scheme="https" />
            </intent-filter>

android:hostに対象のURLのhostを設定

Firebase Hostingのデプロイ

上記の修正ができたら以下のコマンドでFirebase Hostringをデプロイ

$ firebase deploy --only hosting

以下のコマンドで検証可能

■ iOSで検証

$ xcrun simctl openurl booted "https://stock-keeper-review.web.app"

■ Androidで検証

$ adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "https://stock-keeper-review.web.app"' \
    com.unicorn.stockkeeper

ユニバーサルリンクで特定の画面に遷移

URLで特定の画面遷移はNavigatorよりもgo_routerの方が実装しやすいので、以下のPRで移行

github.com

移行後は単純に以下のコマンドのようにURLにgo_routerで設定したpathを指定すればOK

$ adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "https://stock-keeper-review.web.app/cart"' \
    com.unicorn.stockkeeper