Skip to content

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

  1. Dans votre projet Xcode, ouvrez votre fichier Info.plist.
  2. Ajoutez une nouvelle paire clé-valeur.
  3. Définissez la clé sur FlutterDeepLinkingEnabled.
  4. Réglez le type sur Boolean.
  5. Définissez la valeur sur YES. Fichier `Info.plist` d'un projet exemple avec la paire clé-valeur ajoutée.
  1. Dans votre projet Android Studio, ouvrez votre fichier AndroidManifest.xml.
  2. Recherchez .MainActivity dans vos balises activity.
  3. À l’intérieur de la balise activity, ajoutez la balise meta-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

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();
            },
          ),
        ],
      );
    },
  );
}
CETTE PAGE A-T-ELLE ÉTÉ UTILE?
New Stuff!