Création de liens profonds
Découvrez comment implémenter des liens profonds dans votre application iOS ou Android à l’aide de Flutter. Si vous souhaitez consulter un exemple d’application, rendez-vous sur GitHub : Exemple de SDK Flutter de Braze. Pour des informations générales sur les liens profonds, consultez notre FAQ sur les liens profonds.
Conditions préalables
Avant de pouvoir implémenter des liens profonds dans votre application Flutter, vous devrez configurer les liens profonds dans la couche Android ou iOS native.
Implémentation de liens profonds
Étape 1 : Configurer la gestion intégrée de Flutter
- Dans votre projet Xcode, ouvrez votre fichier
Info.plist
. - Ajoutez une nouvelle paire clé-valeur.
- Définissez la clé sur
FlutterDeepLinkingEnabled
. - Réglez le type sur
Boolean
. - Définissez la valeur sur
YES
.
- Dans votre projet Android Studio, ouvrez votre fichier
AndroidManifest.xml
. - Recherchez
.MainActivity
dans vos balisesactivity
. - À l’intérieur de la balise
activity
, ajoutez la balisemeta-data
suivante :1
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
Étape 2 : Transmettre les données à la couche Dart (facultatif)
Vous pouvez utiliser le traitement des liens natifs, de première partie ou de tierce partie pour des cas d’utilisation complexes, tels que l’envoi d’un utilisateur à un emplacement/localisation spécifique dans votre application, ou l’appel d’une fonction spécifique.
Exemple : Lien profond vers une boîte de dialogue d’alerte
Bien que l’exemple suivant ne repose pas sur des paquets supplémentaires, vous pouvez utiliser une approche similaire pour implémenter des paquets natifs, first-party ou third-party, tels que go_router
. Un code Dart supplémentaire peut être nécessaire.
Tout d’abord, un canal de méthode est utilisé dans la couche native pour transmettre les données de la chaîne de caractères de l’URL du lien profond à la couche 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())
}
}
}
Ensuite, une fonction de rappel est utilisée dans la couche Dart pour afficher un dialogue d’alerte en utilisant les données de la chaîne de caractères URL envoyées précédemment.
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();
},
),
],
);
},
);
}