OneSignal + Flutter: Enviando Notificações de forma simples

O que você precisa:

• Projeto Flutter
• Conta gratuita no OneSignal
• Conta gratuita no Firebase

Após criar a conta, essa será a tela inicial. Vamos clicar em “Get Set Up”.

Você vai ser redirecionado pra tela abaixo, vamos clicar em “Set up Push & In-App”.

Aqui vamos selecionar o “Google Android” pois é plataforma que iremos testar nosso app.

Aqui precisamos fornecer uma conta de serviço, então vamos para o Firebase.

Caso não tenha um projeto no Firebase para a sua aplicação Flutter, basta criar um novo projeto e seguir o passo a passo.

Após criar o projeto, vamos clicar em “Configurações do Projeto”.

Vamos até a aba “Cloud Messaging” e vamos ativar a “API Firebase Cloud Messaging(V1)”.

Após isso vamos na aba “Contas de serviço” e vamos clicar em “Gerar nova chave privada”.

Um pop-up vai abrir, leia com atenção e clique em “Gerar chave”.

Após isso vamos voltar para o OneSignal. Vamos subir a nossa chave que acabamos de gerar e clicar em “Save & Continue”.

Aqui vamos escolher o SDK do nosso projeto que no caso é o Flutter e vamos clicar em “Save & Continue”.

Nessa tela iremos obter o APP ID e também poderemos checar se a integração está funcionando.

Vamos instalar o package “onesignal_flutter” e o “flutter_dotenv ”com o comando “flutter pub add <nome_package>”.

Vamos criar um arquivo .env na razi do projeto e dentro dele vamos colocar uma chave e um valor. A chave vai ser “APP_ID” e o valor vai ser o APP ID que o OneSignal gerou pra gente. O arquivo final vai ficar assim:

E também é necessário adicionar o arquivo .env nos assets do pubspec.yaml.

IMPORTANTE: LEMBRE DE ADICIONAR OS SEGUINTES ARQUIVOS AO SEU .gitignore: .env .json(caso não faça sentido pro seu projeto, adicione os arquivos específicos que foram gerados nesse artigo)

Após isso vamos inicializar o OneSignal na nossa aplicação, o seu main.dart deve conter o seguinte:

Ao executar seu projeto, um pop-up deve aparecer, basta aceitar clicando em “Allow” ou “Permitir”.

Por fim clique em “Check for Subscribed Users” e você deve ver uma mensagem de sucesso. Agora vamos mandar uma notificação de fato, basta clicar em “Send a Message”.

Aqui tem várias configurações, mas por hora vamos mandar uma notificação simples, apenas com um corpo.

No fim da página clique em “Review and Send” sem alterar as configurações padrões da seção “Delevery Schedule” pois nós queremos que a notificação seja enviada imediatamente.

Um pop-up vai abrir com algumas informações a respeito da notificação, vamos clicar em “Send Message”.

E pronto, com isso a base foi estabelecida, é possível fazer várias configurações, como separar usuários em grupos, fazer testes A/B, fora a integração com outras plataformas como iOS e Web.

Obrigado por acompanhar o processo e fique a vontade para entrar em contato comigo pelo LinkedIn para trocar uma ideia ou tirar dúvidas.

Fontes: OneSignal, Flutter