🔗Deep Links

Neste guia, vamos explorar o que são deep links, como configurá-los no Flutter para iOS e Android, e como criar e utilizar uma classe helper para facilitar o gerenciamento de deep links no seu app

Utilizando Deep Links no Flutter

1. O que são Deep Links?

Deep links são URLs que direcionam os usuários para partes específicas de um aplicativo, em vez de simplesmente abrir a tela inicial. Eles são úteis para:

  • Integração com marketing: Direcionar usuários para promoções, produtos ou conteúdos específicos.

  • Compartilhamento de conteúdo: Permitir que usuários compartilhem links que abrem diretamente em uma tela específica do app.

  • Melhorar a experiência do usuário: Reduzir o número de passos necessários para acessar um recurso.

Exemplo de deep link: https://meuapp.com/produto/123 pode abrir diretamente a tela de detalhes do produto com ID 123.

2. Configuração de Deep Links no Flutter

2.1. Configuração no Android

Passo 1: Adicionar Intent Filters no AndroidManifest.xml

No arquivo android/app/src/main/AndroidManifest.xml, adicione o seguinte dentro da tag <activity> da sua atividade principal:

<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="@string/deep_link_host" />
	<data android:scheme="https" />
</intent-filter>

  • O que isso faz?

    • Define que a atividade pode ser aberta por um link (android.intent.action.VIEW).

    • Configura o domínio (meuapp.com) e o esquema (https) que serão usados para os deep links.

Passo 2: Configuração dos flavors

Para configurar o @string/deep_link_host, no diretório android/app/src/, crie pastas para cada flavor (se ainda não existirem). Por exemplo:

  • android/app/src/flavor1/

  • android/app/src/flavor2/

Dentro de cada pasta, crie um arquivo res/values/strings.xml para definir o valor de deep_link_host específico para cada flavor.

Exemplo para flavor1:

Arquivo: android/app/src/flavor1/res/values/strings.xml

<resources>
    <string name="deep_link_host">flavor1.meuapp.com</string>
</resources>

Exemplo para flavor2:

Arquivo: android/app/src/flavor2/res/values/strings.xml

<resources>
    <string name="deep_link_host">flavor2.meuapp.com</string>
</resources>

  • O que isso faz?

    • Define o valor de deep_link_host como flavor1.meuapp.com para flavor1.

    • Define o valor de deep_link_host como flavor2.meuapp.com para flavor2.

Passo 3: Configurar o assetlinks.json

Para que o Android valide automaticamente os deep links, você precisa hospedar um arquivo assetlinks.json no seu domínio. Ele deve estar acessível em https://meuapp.com/.well-known/assetlinks.json.

Exemplo de assetlinks.json:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.seuapp",
    "sha256_cert_fingerprints": ["SEU_FINGERPRINT_AQUI"]
  }
}]

  • O que isso faz?

    • Associa o domínio meuapp.com ao seu aplicativo Android.

    • Substitua com.seuapp pelo pacote do seu app e SEU_FINGERPRINT_AQUI pelo fingerprint SHA-256 do seu certificado.

2.2. Configuração no iOS

Passo 1: Adicionar a Capacidade "Associated Domains"

  1. No Xcode:

    • Abra o projeto iOS no Xcode (ios/Runner.xcworkspace).

    • Selecione o target Runner e vá para a aba Signing & Capabilities.

    • Clique no botão + Capability e adicione Associated Domains.

  2. Configurar os Domínios:

    • Na seção Associated Domains, adicione os domínios que você deseja associar ao aplicativo.

    • O formato é applinks:<domínio>.

    Exemplo:

    • Para flavor1, adicione:

      applinks:flavor1.meuapp.com

    • Para flavor2, adicione:

      applinks:flavor2.meuapp.com

  3. No Apple Developer Portal:

    • Acesse o portal Apple Developer.

    • Vá para Certificates, Identifiers & Profiles > Identifiers.

    • Selecione o identificador do seu aplicativo.

    • Habilite a capacidade Associated Domains e adicione os mesmos domínios configurados no Xcode.

Passo 2: Hospedar o Arquivo apple-app-site-association

  1. Crie o Arquivo:

    • Crie um arquivo chamado apple-app-site-association (sem extensão).

    • O conteúdo do arquivo deve seguir o formato JSON e associar o domínio aos IDs dos aplicativos (um para cada flavor).

    Exemplo:

    {
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "<team_id>.com.seuapp",
        "paths": ["*"]
      },
    ]
  }
}

    • Substitua <team_id> pelo seu Team ID (encontrado no Apple Developer Portal).

    • Substitua com.seuapp.flavor1 e com.seuapp.flavor2 pelos bundle IDs dos seus flavors.

  2. Hospede o Arquivo:

    • O arquivo deve ser hospedado no diretório .well-known do seu domínio.

    • O caminho completo deve ser: https://<domínio>/.well-known/apple-app-site-association.

    Exemplo:

    • Para flavor1, o arquivo deve estar acessível em:

      https://flavor1.meuapp.com/.well-known/apple-app-site-association

    • Para flavor2, o arquivo deve estar acessível em:

      https://flavor2.meuapp.com/.well-known/apple-app-site-association

  3. Dicas:

    • O arquivo não deve ter extensão (por exemplo, .json).

    • O servidor deve servir o arquivo com o tipo MIME application/json.

    • Se você não tem um servidor, pode usar o Firebase Hosting para hospedar o arquivo.

3. Criando e Utilizando uma Classe Helper

Agora que configuramos os deep links, vamos criar uma classe helper para facilitar o gerenciamento deles no Flutter.

3.1. Criando a Classe DeepLinksHelper

A classe DeepLinksHelper encapsula toda a lógica de deep links, desde a inicialização até o processamento. Aqui está o código completo:

import 'package:app_links/app_links.dart';
import 'dart:async';

class DeepLinksHelper {
  // Singleton pattern
  static final DeepLinksHelper _instance = DeepLinksHelper._internal();
  factory DeepLinksHelper() => _instance;
  DeepLinksHelper._internal();

  late final AppLinks _appLinks;
  late final StreamSubscription<Uri>? _linkSubscription;
  final StreamController<bool> _homePageReadyController = StreamController<bool>.broadcast();
  Uri? _initialUri;

  // Inicializa o sistema de deep links
  Future<void> initDeepLinks() async {
    _appLinks = AppLinks();
    _linkSubscription = _appLinks.uriLinkStream.listen((Uri uri) {
      print('Deep link recebido: $uri');
      _initialUri = uri;
      _homePageReadyController.stream
          .firstWhere((isReady) => isReady)
          .then((_) {
        _handleIncomingLink();
      });
    });
  }

  // Notifica que a página inicial está pronta
  void notifyHomePageReady() {
    _homePageReadyController.add(true);
  }

  // Processa o link recebido
  void _handleIncomingLink() {
    if (_initialUri != null) {
      print('Processando deep link: $_initialUri');
      // Adicione a lógica para navegar para a tela correta com base no URI.
      _initialUri = null;
    }
  }

  // Cancela a inscrição no stream de deep links
  void cancelSubscription() {
    _linkSubscription?.cancel();
  }
}

3.2. Explicação dos Métodos

  • initDeepLinks(): Inicializa o sistema de deep links e começa a escutar por links recebidos.

  • notifyHomePageReady(): Notifica que a página inicial está pronta para processar o deep link.

  • _handleIncomingLink(): Processa o link recebido. Aqui você pode adicionar a lógica para navegar para a tela correta com base no URI.

  • cancelSubscription(): Cancela a inscrição no stream de deep links para evitar vazamentos de memória.

4. Utilizando o DeepLinksHelper no Seu App

4.1. Inicialização no main.dart

No arquivo main.dart, inicialize o DeepLinksHelper e passe a instância para o MaterialApp:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final deepLinksHelper = DeepLinksHelper();
  await deepLinksHelper.initDeepLinks();
  runApp(MyApp(deepLinksHelper: deepLinksHelper));
}

class MyApp extends StatelessWidget {
  final DeepLinksHelper deepLinksHelper;

  const MyApp({Key? key, required this.deepLinksHelper}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(deepLinksHelper: deepLinksHelper),
    );
  }
}

4.2. Notificação na HomePage

Na HomePage, notifique quando a página estiver pronta:

class HomePage extends StatefulWidget {
  final DeepLinksHelper deepLinksHelper;

  const HomePage({Key? key, required this.deepLinksHelper}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    widget.deepLinksHelper.notifyHomePageReady();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Bem-vindo ao app!')),
    );
  }
}

4.3. Processamento do Link

No método _handleIncomingLink, adicione a lógica para navegar para a tela correta com base no URI:

void _handleIncomingLink() {
  if (_initialUri != null) {
    print('Deep link recebido: $_initialUri');
    // Exemplo: Navegar para uma tela específica com base no caminho do URI.
    if (_initialUri!.path == '/produto') {
      Navigator.push(context, MaterialPageRoute(builder: (_) => ProductPage()));
    }
    _initialUri = null;
  }
}

4.4. Cancelamento da Inscrição

No dispose do widget, cancele a inscrição:

@override
void dispose() {
  widget.deepLinksHelper.cancelSubscription();
  super.dispose();
}

5. Testando Deep Links no Emulador Android e iOS

Agora que você configurou os deep links e a classe DeepLinksHelper, é hora de testar se tudo está funcionando corretamente.

5.1. Testando no Emulador Android

Usando o Comando adb

  1. Certifique-se de que o emulador está rodando.

  2. Execute o comando abaixo no terminal:

    adb shell am start -W -a android.intent.action.VIEW -d "https://flavor1.meuapp.com/details" com.seuapp.flavor1

    • Substitua https://flavor1.meuapp.com/details pelo seu deep link.

    • Substitua com.seuapp.flavor1 pelo applicationId do flavor que você está testando.

  3. Verifique o log no Android Studio para confirmar que o deep link foi recebido.

5.2. Testando no Emulador iOS

Usando o Comando xcrun simctl openurl

  1. Certifique-se de que o emulador iOS está rodando.

  2. Execute o comando abaixo no terminal:

    xcrun simctl openurl booted "https://flavor1.meuapp.com/details"

    • Substitua https://flavor1.meuapp.com/details pelo seu deep link.

  3. Verifique o log no Xcode para confirmar que o deep link foi recebido.

Conclusão

Com essa abordagem, você terá um sistema de deep links robusto e organizado no seu aplicativo Flutter. A classe DeepLinksHelper facilita o gerenciamento dos links, permitindo que você se concentre na lógica do seu app. Agora é só testar e adaptar para o seu caso de uso! 🚀

PreviousInjectableNextModificadores de Classes no Dart

Last updated