Search for a command to run...
Como abrir apps externos instalados no seu celular, como Whatsapp, Facebook, Gmail e Google maps, direto do seu aplicativo Flutter.
Apaixonado pela criação de aplicativos móveis, trabalhando ativamente com o Flutter desde de 2018. Bacharel em Ciência da Computação pela UESPI (Parnaíba). Trabalha como Desenvolvedor Flutter Especialista na Appmax. Atua como organizador do GDG Parnaíba e Flutter Piauí.
No comments yet. Be the first to comment.
Um relato da minha história após 10 anos no mundo da tecnologia
Hey siri, faça algo no meu aplicativo 🎙️
Fala, mobile devs! 👨🏻💻 Hoje vou ensinar vocês a gerar os Termos de Uso ou a Política de Privacidade para nossos aplicativos de forma automatizada e simples. Toda vez que vamos publicar um app nas lojas, enfrentamos a mesma chatice: é necessário i...
Diga adeus às falhas misteriosas com o Open Telemetry!
Comece com Pequenos Passos mas dê o Primeiro Passo
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.
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.
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';
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';
}
}
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';
}
}
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:
scheme: é o nome do esquema do app que vai ser aberto nesse caso para o gmail se chama mailto.
path: é o endereço de email do destinatario para a mensagem ser enviada.
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.
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';
}
}
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';
}
}
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';
}
}
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';
}
}
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';
}
}
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';
}
}
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.
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.
https://www.digitalocean.com/community/tutorials/flutter-url-launcher
https://medium.com/ionicfirebaseapp/flutter-url-launcher-plugin-52b9dfb1f589
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 🚀