Flutterで作ったAndroidアプリにDeepLinkする方法

Flutterで作ったAndroidアプリにDeepLinkの設定をする方法を軽く紹介していきます。
今回は”指定したアプリを開く”といったもののみをやっていきます。
Flutterのセットアップ、SDKの設定等の説明はありません。
VisualStudioCodeを前提とした説明なので、ほかの環境で開発する方は脳内置換をお願いします。

Deep Linksとは

Deep Linksとは、リンク元からアプリの特定の画面を開くことができるリンクのことです。
例えば、スマートフォンとかのブラウザ等でTwitterを開こうとすると、自動的に端末にインストールされたTwitterクライアントへ移動すると思います。
これがDeep Linksです(たぶん)。

環境

[√] Flutter (Channel stable, v1.9.1+hotfix.4, on Microsoft Windows [Version 10.0.18362.418], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[√] VS Code (version 1.39.2)
[√] Connected device (1 available)

全体のながれ

1. Flutterで新規プロジェクトを作る
2. サクッと画面を作る
3. AndroidManifest.xmlを書き換える
4. アプリのビルド
5. 動作を確認する

1.Flutterで新規プロジェクトを作る

ctl + shift + pでコマンドパレットを開く
Flutter: New Projectを選択
プロジェクト名(任意) app_a
ディレクトリを指定して保存

2.サクッと画面を作る

画面に何か表示されていればよいので、以下のコードをmain.dartに書く

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: MyApp(),
        debugShowCheckedModeBanner: false,
      ),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App-A"),
        backgroundColor: Colors.greenAccent,
      ),
      body: Container(
        child: Text("App-Aへようこそ"),
      ),
    );
  }
}

3.AndroidManifest.xmlを書き換える

今回はDeepLinkとAppLinkを設定するので、\app_a\android\app\src\mainディレクトリにあるAndroidManifest.xmlのの中に以下のように変更してください。。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.app_a">

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application android:name="io.flutter.app.FlutterApplication" android:label="app_a" android:icon="@mipmap/ic_launcher">
        <activity android:name=".MainActivity" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data android:name="io.flutter.app.android.SplashScreenUntilFirstFrame" android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

            <!-- Deep Links -->
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="app" android:host="app_a" />
            </intent-filter>

            <!-- App Links -->
            <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="example.com" />
            </intent-filter>
        </activity>
    </application>
</manifest>

細かい説明は後で書く予定です

4.アプリのビルド

プロンプトから

flutter run

もしくはF5でビルド

5.動作を確認する

注意！　Chromeに直接http://example.com/って打ったり、app://app.hoge/って打ってもリンク機能しません。

webサイトや、ほかのアプリからリンクで飛ばないとアプリが起動しないです。

私はこれで2日つぶれました。

Deep Linksの確認方法

<!DOCTYPE html>
<html>
    <body>
        <a href="app://app_a/">App Aに飛ぶ</a>
    </body>
</html>

App Linksでの確認方法

<!DOCTYPE html>
<html>
    <body>
        <a href="http://example.com/">App Aに飛ぶ</a>
    </body>
</html>

もしくは

http://example.com のリンクをどこかのサイト(私はTwitter)に貼ってそれを踏んで確認します。