# Utilizando o url_launcher no Flutter (com exemplos) 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***](https://pub.dev/packages/url_launcher)*,* o mesmo possui mais de 5k likes, funciona em todas as plataformas e com 100% de popularidade no [pub.dev](http://pub.dev), e o bom é que o mesmo foi feito pela equipe do Flutter. # **Como funciona** O método [`launchUrl`](https://pub.dev/documentation/url_launcher/latest/url_launcher/launchUrl.html) 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 [`canLaunchUrl`](https://pub.dev/documentation/url_launcher/latest/url_launcher/canLaunchUrl.html)função para verificar se a URL pode ser executada ou não. ![](https://miro.medium.com/v2/resize:fit:472/1*9njvFI9pEwibIBLaMkl0GA.png align="left") Existem diversos esquemas comuns suportados pelo iOS e Android, veja alguns abaixo: * `http:`, `https:` por exemplo [`http://flutter.dev`abrir](http://flutter.devabrir) URL no navegador padrão do seu celular. * `tel:`, por exemplo `tel:+1 555 010 999`seguido do número abrirá o aplicativo de ligações padrão. * `sms:`, por exemplo, `sms:5550101234` seguido do número abrirá o aplicativo de mensagens padrão. * `file:`, por exemplo, `file:/home`o 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](https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html) e [Android](https://developer.android.com/guide/components/intents-common.html). > *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.*** ```yaml url_launcher: ^6.1.10 ``` 2\. Instale o pacote a partir da linha de comando com o Flutter: ```bash $ flutter pub get ``` 3\. Agora, no seu código Dart, você pode importar o package: ```dart 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. ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:152/1*MC1y_OKMwTupKpBWKBk03w.gif align="left") ### **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****e****text,****os mesmos se referem ao contato e o texto que será a mensagem enviada. Confira no trecho de código abaixo.* ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:152/1*2spkjPOI5nTZv6ZxggummA.gif align="left") ### **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 😄. ![](https://miro.medium.com/v2/resize:fit:227/1*F5EhN-XEs09imsBsSr52ZQ.gif align="left") Os URLs devem ser codificados corretamente, especialmente ao incluir espaços ou outros caracteres especiais. Isso pode ser feito usando a [***Uri***](https://api.dart.dev/stable/2.7.1/dart-core/Uri-class.html)***.*** 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. ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:227/1*tv1h-Im9faUMlF_CZrUEdw.gif align="left") ### **5 - Enviando Mensagem para um contato no Facebook Messenger.** Para abrir o [faceboook messenger](https://pt-br.facebook.com/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`](http://m.me/yourName)`.` 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. ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:227/1*QJVrC5YWxpWH5iyIkm3CWA.gif align="left") ### **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 . ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:454/1*s0-ZE9kOccpIE72VnlW26Q.gif align="left") ### **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***. ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:304/1*7eZlz8fmwlX2XZw9AGzqlA.gif align="left") ### **8- Fazendo uma ligação.** Para fazer uma ligação basta passar o número que você deseja ligar para dá certo. ```dart void fazerLigacao() async { const url = "tel:86994324465"; if (await canLaunchUrl(Uri.parse(url))) { await launchUrl(Uri.parse(url)); } else { throw 'Could not launch $url'; } } ``` ![](https://miro.medium.com/v2/resize:fit:454/1*-flhgmrKiEiKwk8NCsztZw.gif align="left") ### **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`](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* ```dart 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'; } } ``` ![](https://miro.medium.com/v2/resize:fit:400/1*2uFWFo6wanzk4SI-6N7OYg.gif align="left") ### **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*](https://developer.android.com/guide/components/intents-filters) no ***AndroidManifest.xml.*** ```xml ``` No Exemplo acima no``é o que precisamos saber na url, o esquema é definido como *flutter\_example* e o host é [*my.host*](http://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*. ```dart 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.* ### **Link do Github para o código mostrado neste artigo** Todo o código deste artigo está disponível neste [link do GitHub.](https://github.com/iang12/flutter_url_launcher_example) ### Referências * [https://dev.to/alexandrefreire/flutter-urllauncher-edk](https://dev.to/alexandrefreire/flutter-urllauncher-edk) * [https://www.digitalocean.com/community/tutorials/flutter-url-launcher](https://www.digitalocean.com/community/tutorials/flutter-url-launcher) * [https://medium.com/ionicfirebaseapp/flutter-url-launcher-plugin-52b9dfb1f589](https://medium.com/ionicfirebaseapp/flutter-url-launcher-plugin-52b9dfb1f589) # **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](https://linktr.ee/flutterando) Ainda não faz parte da nossa comunidade do Telegram? Entre agora mesmo! [https://t.me/flutterando](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](https://www.github.com/iang12) | [LinkedIn](https://www.linkedin.com/in/ianoliveirag12/) | [Instagram](https://www.instagram.com/ianoliveira.dev/) | [Twitter](https://twitter.com/ianoliveirag12) | [Medium](https://medium.com/@ianoliveirag12)