DeepLink no Flutter para IOS (PT - BR)

1. Introdução ao Deep Linking e Universal Links

O que é Deep Linking?
Deep linking refere-se à prática de direcionar os usuários para uma página específica dentro de um aplicativo móvel, em vez de apenas abrir a tela inicial. Isso melhora a experiência do usuário e aumenta o engajamento.

O que são Universal Links?
Universal Links são a implementação da Apple para deep linking em iOS. Eles permitem que URLs funcionem tanto em um navegador da web quanto dentro de um aplicativo. Quando um usuário clica em um link universal, o iOS determina se o aplicativo correspondente está instalado. Se estiver, o aplicativo é aberto; caso contrário, a URL é aberta no Safari.

---

2. Configuração do Firebase Hosting

2.1 Criar um projeto no Firebase

• Acesse o Firebase Console e crie um novo projeto.

• Siga as instruções para adicionar um aplicativo iOS ao seu projeto.

2.2 Configurar o Firebase Hosting

• No Firebase Console, ative o Firebase Hosting.

• Instale o Firebase CLI em sua máquina, caso ainda não tenha feito isso:

    npm install -g firebase-tools
  

• Faça login na sua conta do Firebase:

    firebase login
  

• Inicialize o Firebase Hosting no diretório do seu projeto:

    firebase init hosting
  

• Siga as instruções para configurar o diretório de publicações e as configurações do aplicativo.

2.3 Criar um arquivo apple-app-site-association

• No diretório público do seu Firebase Hosting, crie um arquivo chamado apple-app-site-association (sem extensão).

• Este arquivo deve ter um formato JSON e conter as informações sobre o seu aplicativo. Um exemplo básico é:

    {
      "applinks": {
        "apps": [],
        "details": [
          {
            "appID": "<TEAM_ID>.<BUNDLE_ID>",
            "paths": ["*"]
          }
        ]
      }
    }
  

  • appID: O ID do seu aplicativo, que é a combinação do ID da equipe (TEAM_ID) e do Bundle ID (BUNDLE_ID).

  • paths: O caminho que você deseja que o Universal Link funcione. Usar ["*"] permite que qualquer caminho no domínio seja acessível.

• Após criar o arquivo, faça o upload para o seu Firebase Hosting:

    firebase deploy --only hosting
  

---

3. Configuração do seu aplicativo Flutter

3.1 Adicionar dependências
No arquivo pubspec.yaml do seu projeto Flutter, adicione a dependência uni_links:

dependencies:
  uni_links: ^0.5.1

Execute flutter pub get para instalar as dependências.

3.2 Configuração do Info.plist
Abra o arquivo Info.plist do seu projeto iOS e adicione a seguinte configuração para suportar Universal Links:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>your_custom_scheme</string>
        </array>
    </dict>
</array>
<key>Associated Domains</key>
<array>
    <string>applinks:your_custom_domain.com</string>
</array>

• CFBundleURLSchemes: Adicione um esquema personalizado para o seu aplicativo.

• applinks: Este campo deve corresponder ao domínio que você configurou no Firebase.

---

Claro! Aqui está uma explicação sobre como configurar o go_router no seu aplicativo Flutter e como ele funciona, incluindo a navegação com deep linking.

---

4. Navegação com go_router

O go_router é um pacote do Flutter que simplifica a navegação em aplicativos Flutter, especialmente quando se trata de rotas aninhadas e deep linking. Ele permite uma configuração mais intuitiva e organiza as rotas de maneira mais eficiente.

4.1 Adicionar Dependência

Para usar o go_router, primeiro, adicione a dependência ao seu arquivo pubspec.yaml:

dependencies:
  go_router: ^6.0.0

Em seguida, execute flutter pub get para instalar a dependência.

4.2 Configuração do go_router

Crie uma classe para gerenciar as rotas. Aqui está um exemplo simples:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationParser: _router.routeInformationParser,
    );
  }

  // Configuração do GoRouter
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomePage(),
      ),
      GoRoute(
        path: '/details/:id',
        builder: (context, state) {
          final String id = state.params['id']!;
          return DetailsPage(id: id);
        },
      ),
    ],
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navegando para a página de detalhes com um ID
            context.go('/details/1');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: Text('Details for item $id'),
      ),
    );
  }
}

4.3 Como Funciona

• Definindo as Rotas: As rotas são definidas dentro do GoRouter, onde cada GoRoute representa um caminho específico. O path é a URL que corresponde à rota e o builder constrói a tela correspondente.

• Navegando entre as Páginas: Você pode usar context.go() para navegar para uma nova página. O método context.push() é usado se você quiser adicionar uma nova rota à pilha (permitindo voltar).

4.4 Integração com Deep Linking

Com a configuração do go_router, você pode facilmente integrar o deep linking para abrir páginas específicas do aplicativo.

4.4.1 Atualizando o go_router para suporte a Deep Links

Para integrar o deep linking, você pode adicionar um listener ao linkStream do uni_links, assim como mostrado anteriormente:

import 'package:uni_links/uni_links.dart';

// Dentro do _initDeepLinkListener()
void _initDeepLinkListener() async {
  linkStream.listen((String? link) {
    if (link != null) {
      // Extraia o ID do link e navegue para a página de detalhes
      final Uri uri = Uri.parse(link);
      if (uri.pathSegments.length == 2 && uri.pathSegments[0] == 'details') {
        final String id = uri.pathSegments[1];
        context.go('/details/$id');
      }
    }
  });
}

4.5 Testando a Navegação

Com o go_router configurado, você pode testar a navegação entre as páginas do aplicativo. Para testar o deep linking, use o comando que mencionamos anteriormente para abrir um link que direcione para o aplicativo. Por exemplo:

xcrun simctl openurl booted https://your_custom_domain.com/details/1

Isso abrirá a DetailsPage do seu aplicativo com o ID 1.

Ao utilizar o go_router, você não apenas simplifica a navegação do seu aplicativo, mas também melhora a experiência do usuário com deep links, permitindo que eles acessem diretamente o conteúdo desejado. Essa abordagem modular e organizada facilita a manutenção e a expansão do seu aplicativo Flutter.

---

5. Testando o Universal Link

5.1 Testar no Xcode
Para testar Universal Links, você pode usar o Xcode para instalar o aplicativo em um dispositivo ou simulador. Depois, você pode abrir um terminal e usar o comando:

xcrun simctl openurl booted https://your_custom_domain.com/path

5.2 Testar em um dispositivo real
Para testar em um dispositivo real, você pode criar um link universal e enviá-lo via e-mail ou mensagem para o seu dispositivo.

---

6. Conclusão

Neste artigo, discutimos como configurar o deep linking no Flutter para iOS usando Universal Links. Ao seguir os passos mencionados, você pode implementar deep linking de maneira eficaz, melhorando a experiência do usuário no seu aplicativo. Lembre-se de testar rigorosamente os links universais para garantir que funcionem conforme o esperado.