ディープリンク
Flutterを使用してiOSまたはAndroidアプリにディープリンクを実装する方法を学びます。サンプルアプリをチェックしたい場合は、GitHub をご覧ください。Braze Flutter SDK 例。ディープリンクに関する一般的な情報については、ディープリンクに関する FAQ をご覧ください。
前提条件
ディープリンクをFlutterアプリに実装する前に、ネイティブのAndroidまたはiOSレイヤーでディープリンクを設定する必要があります。
ディープリンクの実装
ステップ 1:Flutter の組み込み処理を設定する
- Xcodeプロジェクトで、
Info.plist
ファイルを開封します。 - 新しいキーと値のペアを追加します。
- キーを
FlutterDeepLinkingEnabled
に設定します。 - タイプを
Boolean
に設定します。 - 値を
YES
に設定します。
- Android Studio プロジェクトで、
AndroidManifest.xml
ファイルを開封します。 activity
タグで.MainActivity
を見つけます。activity
タグ内に、次のmeta-data
タグを追加します:1
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
ステップ2:データをDartレイヤーに転送する(オプション)
ネイティブ、ファーストパーティ、またはサードパーティのリンク処理を使用して、アプリ内の特定の場所にユーザーを送信したり、特定の機能を呼び出したりするなどの複雑な使用例に対応できます。
例: アラートダイアログへのディープリンク
note:
次の例では追加のパッケージに依存していませんが、go_router
のようなネイティブ、ファーストパーティ、またはサードパーティのパッケージを実装するために同様のアプローチを使用できます。追加のDartコードが必要になる場合があります。
まず、メソッドチャネルがネイティブ層で使用され、ディープリンクのURL文字列データをDart層に転送します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
extension AppDelegate {
// Delegate method for handling custom scheme links.
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
forwardURL(url)
return true
}
// Delegate method for handling universal links.
override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
let url = userActivity.webpageURL else {
return false
}
forwardURL(url)
return true
}
private func forwardURL(_ url: URL) {
guard let controller: FlutterViewController = window?.rootViewController as? FlutterViewController else { return }
let deepLinkChannel = FlutterMethodChannel(name: "deepLinkChannel", binaryMessenger: controller.binaryMessenger)
deepLinkChannel.invokeMethod("receiveDeepLink", arguments: url.absoluteString)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class MainActivity : FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
handleDeepLink(intent)
}
override fun onNewIntent(intent: Intent) {
super.onNewIntent(intent)
handleDeepLink(intent)
}
private fun handleDeepLink(intent: Intent) {
val binaryMessenger = flutterEngine?.dartExecutor?.binaryMessenger
if (intent?.action == Intent.ACTION_VIEW && binaryMessenger != null) {
MethodChannel(binaryMessenger, "deepLinkChannel")
.invokeMethod("receivedDeepLink", intent?.data.toString())
}
}
}
次に、コールバック関数がDartレイヤーで使用され、以前に送信されたURL文字列データを使用してアラートダイアログを表示します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
MethodChannel('deepLinkChannel').setMethodCallHandler((call) async {
deepLinkAlert(call.arguments, context);
});
void deepLinkAlert(String link, BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Deep Link Alert"),
content: Text("Opened with deep link: $link"),
actions: <Widget>[
TextButton(
child: Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
New Stuff!