🔗Firebase Dynamic Links

Esta seção vai abordar o uso de dynamic links, suas funcionalidades, alguns casos de uso e maneiras de integração, através do plugin disponibilizado pelo Firebase.

Primeiramente, o que são dynamic links?

Segundo o próprio site do Firebase:

Dynamic Links são URLs inteligentes que direcionam usuários atuais e potenciais para qualquer lugar em apps iOS ou Android. Eles resistem ao processo de instalação do app. Por isso, até os usuários novos visualizam o conteúdo que procuram quando abrem o app pela primeira vez.

Sabendo disso, vamos mostrar a usabilidade real dessa funcionalidade. Como é utilizado um plugin do firebase para isso, vou deixar o link aqui para as configurações de uso, tanto para Android quanto para iOS, e vamos focar mais na usabilidade de código, já que a documentação do próprio site é muito completa.

Após as configurações serem feitas no código, precisamos habilitar e criar um domínio para nossa aplicação no console do firebase do projeto, na seguinte seção:

A partir disso, temos dois casos de uso que vamos abordar aqui, a abertura do app a partir de um dynamic link e criação de um dynamic link pelo app.

Criar dynamic link pelo app Flutter

A criação de um link dinâmico diretamente pelo app é muito simples, vamos precisar apenas do domínio criado anteriormente no console e o bundle do Android e do iOS.

Future<String?> createShortDynamicLink({
    required String username,
    required String userId,
  }) async {
    try {
      final dynamicLinkParams = DynamicLinkParameters(
        link: Uri.parse(
            "https://loomi.page.link/perfil?id=$userId"),
        uriPrefix: "https://loomi.page.link",
        androidParameters: AndroidParameters(
          packageName: 'com.loomi.nome.do.app',
        ),
        iosParameters: IOSParameters(
          bundleId: 'com.loomi.nome.do.app',
        ),
        navigationInfoParameters: const NavigationInfoParameters(
          forcedRedirectEnabled: false,
        ),
        socialMetaTagParameters: const SocialMetaTagParameters(
          title: "Nome",
          description:
              "Descrição",
        ),
      );
      final dynamicLink = await FirebaseDynamicLinks.instance.buildShortLink(
        dynamicLinkParams,
      );

      return dynamicLink.shortUrl.toString();
    } catch (e) {
      return null;
    }
  }

Com isso, a função já nos retorna o dynamic link criado e pronto para uso, que fará com que nosso aplicativo abra. Neste example, é criado um link onde está sendo passado nos seus parâmetros um username e um userId, para uso futuro no momento de abrir este link.

Receber um dynamic link no app Flutter

Para isso, é necessário algumas funções a mais, que por exemplo, podem ser adicionadas na splash screen da aplicação.

OBSERVAÇÃO:

Para não termos problemas com iOS, utilizamos um outro plugin para nos ajudar nisso, o plugin é a seguinte: app_links

Devemos "avisar" ao app, para que fique escutando se o app é aberto a partir de um link dinâmico, estando ele fechado ou apenas "minimizado". Para isso, utilizamos a função para inicializar e escutar essas ações, a qual pode ser chamada dentro do initState ou didChangeDependencies.

void _initDynamicLinks({required BuildContext context}) async {
    if (Platform.isIOS) {
      _appLinks = AppLinks();

      final uri = await _appLinks.getInitialAppLink();

      if (uri != null) {
        _handleDynamicLinks(uri);
      }

      _appLinks.allUriLinkStream.listen((uri) {
        _handleDynamicLinks(uri);
      });
    } else {
      FirebaseDynamicLinks.instance.onLink.listen((dynamicLinkData) async {
        _handleDynamicLinks(dynamicLinkData.link);
      });

      final PendingDynamicLinkData? data =
          await FirebaseDynamicLinks.instance.getInitialLink();

      if (data != null) {
        _handleDynamicLinks(data.link);
      }
    }
  }

E a função que faz as ações após o recebimento do link, para o caso de uso que criamos onde o userId do usuário é passado como parâmetro é a seguinte:

Future<void> _handleDynamicLinks(
    Uri uriLink,
  ) async {
    var authenticated = await Authentication.authenticated();
    final Uri? deepLink = uriLink;

    if (deepLink != null && authenticated) {

    if (Platform.isIOS) {
        var result =
            await FirebaseDynamicLinks.instance.getDynamicLink(deepLink);

        redirectFromDeepLink(result?.link ?? Uri());
      } else {
        redirectFromDeepLink(deepLink);
      }
    }
  }

 redirectFromDeepLink(Uri deepLink) {
    if (deepLink.path.contains('perfil')) {
      String userId = deepLink.queryParameters['id'] ?? '';

      navigationService.navigatorKey.currentState!.push(
        MaterialPageRoute(
          builder: (context) {
            return UserProfileScreen(
              userId: userId,
            );
          },
        ),
      );
    }
  }

Com isso podemos pegar este id da URL, e usar como quisermos, neste caso, para redirecionar o usuário para o perfil de alguém. Assim, podemos perceber que os dynamic links nos dão inúmeras oportunidades para seu uso, da maneira que for necessário de acordo com cada projeto.

Para o uso correto do dynamic link para o APP fechado ou quando vem da instalação da loja, podemos fazer o seguinte:

Dentro da main do projeto, chamar a seguinte função:

  final PendingDynamicLinkData? initialLink =
      await FirebaseDynamicLinks.instance.getInitialLink();

Com ela, podemos passar o initialLink como parametro do MyApp, depois para dentro da primeira tela que temos, nos nossos casos a SplashScreen, e dentro do didChangeDependencies podemos fazer a seguinte verificação:

if (widget.initialDynamicLink != null) {
          _handleDynamicLinks(
            widget.initialDynamicLink!.link,
          );
        }