Deep linking
Saiba como implementar deep links em seu app para iOS ou Android usando o Flutter. Se quiser dar uma olhada em um app de amostra, consulte GitHub: Exemplo do Braze Flutter SDK. Para obter informações gerais sobre deep linking, consulte nossas Perguntas frequentes sobre deep linking.
Pré-requisitos
Antes de implementar o deep linking em seu app Flutter, você precisará configurar o deep linking na camada nativa do Android ou iOS.
Implementação de deep linking
Etapa 1: Configurar o manuseio integrado do Flutter
- Em seu projeto Xcode, abra o arquivo
Info.plist
. - Adicionar um novo par chave-valor.
- Coloque a tecla em
FlutterDeepLinkingEnabled
. - Defina o tipo como
Boolean
. - Defina o valor para
YES
.
- Em seu projeto do Android Studio, abra o arquivo
AndroidManifest.xml
. - Localize
.MainActivity
em suas tagsactivity
. - Na tag
activity
, adicione a seguinte tagmeta-data
:1
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
Etapa 2: Encaminhar dados para a camada Dart (opcional)
É possível usar o tratamento de links nativos, próprios ou de terceiros para casos de uso complexos, como enviar um usuário para um local específico em seu app ou chamar uma função específica.
Exemplo: Deep linking para uma caixa de diálogo de alerta
Embora o exemplo a seguir não dependa de pacotes adicionais, você pode usar uma abordagem semelhante para implementar pacotes nativos, próprios ou de terceiros, como go_router
. Pode ser necessário um código Dart adicional.
Primeiro, um canal de método é usado na camada nativa para encaminhar os dados da string de URL do deep link para a camada 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())
}
}
}
Em seguida, uma função de retorno de chamada é usada na camada Dart para exibir um diálogo de alerta usando os dados da string de URL enviados anteriormente.
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();
},
),
],
);
},
);
}