Como configurar um cliente SMTP e enviar e-mails com Flutter

Flutter: Programar nisso é bom demais

Flutter é uma plataforma que não para de crescer, já sendo adotado por grandes empresas como Google e Nubank. Nesse tutorial vou mostrar como você pode enviar e-mails diretamente do seu app Flutter, para isso configurando um cliente SMTP.

Esse tutorial supõe que você possua o Flutter + Android Studio configurado e instalado corretamente em seu computador.

Criar o projeto Flutter no Android Studio

Vamos usar como base o app Flutter Demo Home Page da documentação do Flutter que você pode consultar aqui como o fazer: https://flutter.dev/docs/get-started/test-drive

Adicionar o package mailer

No arquivo pubspec.yaml vamos adicionar o package mailer, que será o responsável por configurar nosso cliente SMTP e gerenciar o envio dos emails. Ele deve ser adicionado junto com as dependencies, como mostra abaixo:

Após isso, basta abrir o terminal na pasta do seu projeto e executar o comando flutter pub get para que o Flutter baixe e instale seus pacotes, logo, o recém adicionado mailer.

flutter pub get

Você deverá ver a mensagem a seguir para confirmar que o comando executou corretamente.

Running “flutter pub get” in seuProjeto… 3.3s

Criando a classe Email

Vamos criar uma classe responsável por tratar o envio de e-mails, por meio do package mailer.

Crie um novo arquivo em lib > email.dart, e o inicialize da seguinte maneira:

Criando arquivo email.dart

No construtor da classe setamos a variável username e configuramos o cliente utilizando o Gmail. A senha só precisa ser utilizada como parâmetro para a configuração do email, por isso não a guardamos.

Este cliente SMTP foi configurado para utilizar o Gmail, mas você pode utilizar outros servidores seguindo a documentação em https://pub.dev/packages/mailer

Configurando o envio do e-mail

Agora vamos criar o método sendMessage() que será o responsável de fato em enviar o email.

Ele deve receber 3 parâmetros importantes, que são a mensagem a ser enviada, o assunto do e-mail e seu destinatário.

Esse método possui a tag async pois deve esperar a resposta do servidor dizendo se houve sucesso ou não no envio. Também possui o retorno do tipo Future<bool>, sendo true para sucesso e false para fracasso.

Uma exceção será disparada em caso de falha.

Método sendMessage() baseado na documentação do package mailer

Portanto, configuramos a variável message com as informações do e-mail e a enviamos pelo método send() com o smtpServer de segundo parâmetro.

Editando main.dart

Agora basta importar nossa classe Email no arquivo principal main.dart e configurar um simples envio de e-mail.

import 'package:flutter/material.dart';
import 'email.dart'; //Importamos a classe aqui
...

Na classe _MyHomePageState devemos apagar seus atributos e o método _incrementCounter() e substituir pelos novos abaixo, além do _sendEmail().

Existem maneiras muito mais seguras de inserir a autenticação que não seja diretamente no código, porém nesse tutorial será abordado da maneira mais simples para mostrar o funcionamento.

O atributo _text irá mostrar na interface se nosso envio foi bem sucedido ou não, e o atributo email será a instância do nosso servidor. O método sendEmail() é do tipo async, pois precisa aguardar o resultado do envio de email.

Lembra que o método sendMessage() retorna um boolean? Pois vamos salvar esse retorno na variável result, e setar o novo valor de _text de acordo com seu resultado.

Obs: A tag await é essencial para que o fluxo do código aguarde o retorno do método email.sendMessage().

Atualizando a UI

Por fim, vamos atualizar alguns detalhes da UI para que o app funcione corretamente. No método build() da classe_MainHomePageState vamos atualizar o return de Scaffold():

Vamos trocar o texto do centro da tela para exibir o atributo _text. Também o botão flutuante, trocando seu ícone, dica flutuante e o método que será executado ao ser pressionado.

Agora execute seu app que deverá parecer com o seguinte :)

Agora é só clicar no ícone do email e aguardar que a mensagem seja enviada :)

Caso algum erro aconteça, você pode conferir os logs que terão a descrição do problema.

DETALHE MUITO IMPORTANTE:

No Gmail você precisa autorizar o uso de apps menos seguros, pois senão ele irá bloquear por razões de segurança. Acesse https://myaccount.google.com/lesssecureapps e marque a caixinha em ATIVADA.

App menos seguro

Na dúvida basta criar um e-mail novo para testes :)

Espero que tenha sido útil, qualquer feedback ou se houver algum erro no tutorial, deixe abaixo nos comentários :)

github.com/paulo9mv