Skip to main content
HashnodeIan Oliveira

Command Palette

Search for a command to run...

Utilizando o url_launcher no Flutter (com exemplos)

Como abrir apps externos instalados no seu celular, como Whatsapp, Facebook, Gmail e Google maps, direto do seu aplicativo Flutter.

Updated
•8 min read
Utilizando o url_launcher no Flutter (com exemplos)
I
Ian Oliveira

Olá, flutter devs blz? Então, dependendo do aplicativo que você está desenvolvendo, as vezes é necessario que o usuário faça uma ligação, envie uma mensagem ou E-mail pressionando um botão qualquer no seu aplicativo.

Haverá momentos, em que você deseja interagir com aplicativos externos ao app que você está desenvolvendo, isso pode ser algo tão simples quanto abrir uma página da web no Browser, ou abrir a agenda de contatos do seu próprio celular.

Certo dia, enquanto estava desenvolvendo um novo aplicativo, me deparei com uma situação: era necessário que o usuário pudesse mandar uma mensagem no Whatsapp para um contato a partir de um botão no meu app, então procurei por soluções, e foi aí que achei um package bem legal, chamado de url_launcher, o mesmo possui mais de 5k likes, funciona em todas as plataformas e com 100% de popularidade no pub.dev, e o bom é que o mesmo foi feito pela equipe do Flutter.

Como funciona

O método launchUrl recebe como argumento uma Uri.parse() que é uma função usada para analisar uma String e converter em um objeto Uri, que representa uma URI (Uniform Resource Identifier).

As URLs devem ser codificadass corretamente, especialmente ao incluir espaços ou outros caracteres especiais, nesse caso a Uri nos ajuda com isso.

A URL gerada pode ser formatada usando vários esquemas de URL diferentes. Os esquemas de URL suportados dependem da plataforma subjacente e dos aplicativos instalados.

Além disso, você pode usar a canLaunchUrlfunção para verificar se a URL pode ser executada ou não.

Existem diversos esquemas comuns suportados pelo iOS e Android, veja alguns abaixo:

  • http:<URL>, https:<URL> por exemplo http://flutter.devabrir URL no navegador padrão do seu celular.

  • tel:<phone number>, por exemplo tel:+1 555 010 999seguido do número abrirá o aplicativo de ligações padrão.

  • sms:<phone number>, por exemplo, sms:5550101234 seguido do número abrirá o aplicativo de mensagens padrão.

  • file:<path>, por exemplo, file:/homeo sistema de arquivos será iniciado no gerenciador padrão do device.

Bem, a seguir vamos ver diversos exemplos e com os casos de uso mais utilizados, contudo, se você quiser outros detalhes, estes podem ser encontrados aqui para iOS e Android.

No final desse artigo irei mostrar como criar seus próprios esquemas de url.

Implementação

  1. Vamos começar adicionando a dependência ao nosso arquivo pubspec.yaml.
url_launcher: ^6.1.10

2. Instale o pacote a partir da linha de comando com o Flutter:

$ flutter pub get

3. Agora, no seu código Dart, você pode importar o package:

import 'package:url_launcher/url_launcher.dart';

1 - Abrindo sites no navegador do dispositivo.

Para abrir qualquer site da internet no dispositivo é bem simples, confira no trecho de código abaixo, onde abrimos o site da flutterando como exemplo.

void abrirUrl() async {
    const url = 'https://flutterando.com.br/';
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }

2 - Mandando mensagem para um contato no Whatsapp.

Bom, para mandar mensagem para um contato qualquer que possua whatsapp é super simples, basta usarmos o esquema do whatsapp seguido dos parametros number*etext,os mesmos se referem ao contato e o texto que será a mensagem enviada. Confira no trecho de código abaixo.*

void abrirWhatsApp() async {
    var whatsappUrl = "whatsapp://send?phone=5586994324465&text=Olá,tudo bem ?";
    if (await canLaunchUrl(Uri.parse(whatsappUrl))) {
      await launchUrl(Uri.parse(whatsappUrl));
    } else {
      throw 'Could not launch $whatsappUrl';
    }
  }

3 - Enviando Email para um determinado endereço.

Agora, imagina que você queira colocar uma função no seu aplicativo, para o usuário mandar emails para um determinado endereço, avisando de bugs ou até mesmo, mandando sugestões de melhorias. Para fazer isso ele teria que abrir o gmail direto do seu app.

Iniciar um endereço de e-mail com o url_launcher é muito semelhante aos métodos acima. Vem comigo no exemplo abaixo, que vou mostrar como se faz 😄.

Os URLs devem ser codificados corretamente, especialmente ao incluir espaços ou outros caracteres especiais. Isso pode ser feito usando a Uri.

a mesma recebe 3 parâmetros principais:

  1. scheme: é o nome do esquema do app que vai ser aberto nesse caso para o gmail se chama mailto.

  2. path: é o endereço de email do destinatario para a mensagem ser enviada.

  3. query: aqui temos o conteudo da mensagem, a mesma possui duas partes

  • body: é o assunto do email a ser enviado.

  • subject: é o corpo da mensagem em si.

4 - Abrindo o google maps em uma determinada localização.

Nesse exemplo, vamos abrir o google maps passando uma url com as coordenadas de latitude e longitude, e acredite é só isso rsrsr.

Abaixo eu uso as coordenadas de copacabana no Rio de Janeiro.

void abrirGoogleMaps() async {
    const urlMap = "https://www.google.com/maps/search/?api=1&query=-22.9732303,-43.2032649";
    if (await canLaunchUrl(Uri.parse(urlMap))) {
      await launchUrl(Uri.parse(urlMap));
    } else {
      throw 'Could not launch Maps';
    }
  }

5 - Enviando Mensagem para um contato no Facebook Messenger.

Para abrir o faceboook messenger, você precisa informar a url do messenger do contato que irá ser redirecionado para o chat. Todo usuário tem um id ou username no messenger.

A URL do messenger seria m.me/username.

Confira o exemplo do trecho de código abaixo. Há e lembre-se que se não houver o aplicativo instalado, ele irá te redirecionar para a Play Store.

void abrirMessenger() async {
    var messengerUrl = 'https://m.me/ianwandersom';
    if (await canLaunchUrl(Uri.parse(messengerUrl))) {
      await launchUrl(
        Uri.parse(messengerUrl),
        mode: LaunchMode.externalApplication,
      );
    } else {
      throw 'Could not launch $messengerUrl';
    }
  }

6 - Abrindo a agenda de contatos do celular.

Aqui vamos abrir agenda de contatos do nosso celular, isso pode ser bem útil, dependendo do aplicativo que precise dessa integração .

void abrirContatos() async {
    const url = 'content://com.android.contacts/contacts';
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }

7 - Enviando um SMS.

Para enviar um SMS você só precisa passar o número no scheme sms e o conteúdo da mensagem no body.

void enviarSms() async {
    const url = "sms:86994324465?body=Olá, tudo bem?";
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }

8- Fazendo uma ligação.

Para fazer uma ligação basta passar o número que você deseja ligar para dá certo.

void fazerLigacao() async {
    const url = "tel:86994324465";
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }

9- Abrindo o instagram.

Para abrir o Instagram, você precisa informar o nome e usuário na URL que irá ser redirecionado para o chat. Todo usuário tem um username no instagram.

A URL do instagram seria https://instagram.com/ianoliveira.dev

Confira o exemplo no trecho de código abaixo. Há e lembre-se que se não houver o aplicativo instalado, ele irá te redirecionar para a loja ou site.

Você consegue controlar esse conportamento com a propriedade:

mode: LaunchMode.externalApplication passando no launchUrl

void abrirInstagram() async {
    var messengerUrl = 'https://instagram.com/ianoliveira.dev';
    if (await canLaunchUrl(Uri.parse(messengerUrl))) {
      await launchUrl(Uri.parse(messengerUrl));
    } else {
      throw 'Could not launch $messengerUrl';
    }
  }

Como lidar com receptores de URL ausentes

Um determinado dispositivo móvel pode não conseguir receber todos os esquemas de URL suportados. Por exemplo, um dispositivo pode não ter um aplicativo de e-mail e, portanto, não há suporte para iniciar um URL usando o esquema de e-mail.

Recomendamos verificar quais esquemas de URL são suportados usando o método canLaunch antes de chamar a inicialização. Se o método canLaunch retornar false, você pode mostrar para o usuário um alerta indicando o ocorrido, ou até mesmo, redirecionar o usuário para o site em que ele possa baixar esse app ou fazer outra ação por exemplo.

Bonus: Escrevendo seus próprios esquemas

Para abrir seus próprios aplicativos, você precisa saber o esquema do aplicativo que está sendo aberto, no Android nós só precisamos implementar uma intent-filter no AndroidManifest.xml.

<intent-filter> 
  <action android:name="android.intent.action.VIEW" /> 
  <category android:name="android.intent.category.DEFAULT" /> 
  <category android:name="android.intent.category.BROWSABLE" /> 
  <data 
    android:host="my.host" 
    android:scheme="flutter_example" /> 
</intent-filter>

No Exemplo acima no<data>é o que precisamos saber na url, o esquema é definido como flutter_example e o host é my.host.

Lembre-se que a intent-filter é implementada no app que queremos abrir ou chamar apartir de outro. Portanto, os componentes de url que precisamos são: scheme://host.

Agora, no aplicativo que irá chamar a execução do outro implemente essa função, passando o scheme e o host criado anteriormente.


void openMyApp() async {
    const url = 'flutter_example://my.host'; //:scheme://host
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      debugPrint('Could not launch $url');
    }
  }

Atenção: Todos esses exemplos foram testados apenas no android, contudo no IOS é para funcionar, se algo mudar pode ser apenas um scheme ou outro que difere.

Todo o código deste artigo está disponível neste link do GitHub.

Referências

Conclusão

Bom galera, isso foi tudo rsrsr.. acho que deu pra ver o grande potencial desse maravilhoso package.

Espero que você tenha gostado! Caso haja alguma dúvida ou contribuição, deixe nos comentários!

Para mais assuntos de Flutter, procure os canais de comunicação da Flutterando: https://linktr.ee/flutterando

Ainda não faz parte da nossa comunidade do Telegram? Entre agora mesmo! https://t.me/flutterando

Obrigado por ler até aqui.😁

Estou realmente animado com o futuro do Flutter e suas possibilidades.

Me siga para estar sempre por dentro dos próximos artigos ou assine a neswletter 🚀

🌐 Minhas redes sociais 🌐

GitHub | LinkedIn | Instagram | Twitter | Medium

#flutter#dart#mobile-development#android#ios#flutter-examples

More from this blog

Ian Oliveira

25 posts

I'm Mobile Software Engineer & Community Manager.