Artigo original: How to Add Push Notifications to a Flutter App using Firebase Cloud Messaging

O Flutter rapidamente se tornou um dos frameworks mais populares para o desenvolvimento de aplicativos móveis multiplataforma. Ele ajuda os desenvolvedores a criar UIs nativas com suporte para diferentes tamanhos de dispositivos, densidades de pixels e orientações, criando uma bela e perfeita UI/UX.

Neste tutorial, nós aprenderemos como adicionar notificações push (tipo de mensagem exibida automaticamente na tela do seu celular) em um aplicativo Flutter usando o serviço Firebase Cloud Messaging (em português Mensagens na Nuvem do Firebase). Este tutorial lidará com as configurações apenas para a plataforma Android.

Primeiro, o que são notificações push?

Notificações push são um tipo de mensagens pop-up (em português mensagens que "estouram" na tela) que alertam os usuários de aplicativos sobre o que está acontecendo no aplicativo. Elas também são uma forma importante de ampliar o engajamento dos usuários em seu aplicativo.

Por exemplo, digamos que um usuário esquece do aplicativo depois de instalado. Então, você pode usar notificações push como um mecanismo para recuperar e manter o interesse dos usuários. As notificações push também podem ajudar a direcionar tráfego para o aplicativo.

O Firebase Cloud Messaging é um serviço oferecido pela Firebase, que permite que você envie notificações para seus usuários. Você pode definir várias configurações para enviar diferentes notificações para públicos diferentes com base em tempo e rotina.

Por causa de todos esses benefícios, nós vamos usar esse serviço para enviar notificações para nosso aplicativo Flutter.

Passo 1: criar um projeto do Flutter

Primeiro, vamos criar um projeto para o Flutter. Para isso, devemos ter o Flutter SDK instalado em nosso sistema. Você pode encontrar etapas simples para a instalação do Flutter na documentação oficial.

Depois de instalar o Flutter com sucesso, você pode simplesmente executar o seguinte comando no diretório desejado para configurar um projeto Flutter completo:

flutter create pushNotification

Depois de configurar o projeto, navegue dentro do diretório do projeto. Execute o seguinte comando no terminal para executar o projeto em um emulador disponível ou em um dispositivo real:

flutter run

Após uma compilação bem-sucedida, você obterá o seguinte resultado na tela do emulador:

image-69

Passo 2: integrar a configuração do Firebase ao Flutter

Nesta etapa, vamos integrar os serviços do Firebase ao nosso projeto Flutter. Mas primeiro, precisamos criar um projeto do Firebase. As diretrizes de configuração também são fornecidas na documentação oficial do Firebase para Flutter.

Para criar um projeto do Firebase, precisamos fazer login no Firebase e navegar até o console. Lá, podemos simplesmente clicar em 'Adicionar um projeto' (Add a project, em inglês) para iniciar nosso projeto.

Em seguida, uma janela aparecerá pedindo para inserir o nome do projeto. Aqui, mantive o nome do projeto como FlutterPushNotification, conforme mostrado na captura de tela abaixo:

image-70

Podemos continuar para a próxima etapa quando o projeto for criado. Após a configuração do projeto, obteremos um console de projeto, conforme mostrado na captura de tela abaixo:

image-71

Aqui, vamos configurar o Firebase para a plataforma Android. Portanto, precisamos clicar no ícone do Android exibido na captura de tela acima. Isso nos levará à interface para registrar o Firebase com nosso projeto de aplicativo Flutter.

Passo 3: registrar o Firebase no seu aplicativo Android

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (Android package name em inglês).

Como o processo de registro é específico da plataforma, vamos registrar nosso aplicativo para a plataforma Android. Após clicar no ícone do Android, seremos direcionados para uma interface solicitando o nome do pacote Android (ou Android package name, se a interface estiver em inglês).

Para adicionar o nome do pacote do nosso projeto Flutter, precisamos localizá-lo primeiro. O nome do pacote estará disponível no arquivo ./android/app/build.gradle do seu projeto Flutter. Você verá algo assim:

com.example.pushNotification

Só precisamos copiá-lo e colá-lo no campo de entrada do nome do pacote Android, conforme mostrado na captura de tela abaixo:

image-72

Depois disso, podemos simplesmente clicar no botão 'Registrar aplicativo' ('Register app', em inglês). Isso nos levará à interface onde podemos obter o arquivo google-services.json que vinculará nosso aplicativo Flutter aos serviços do Firebase Google.

Precisamos baixar o arquivo e movê-lo para o diretório ./android/app do nosso projeto Flutter. As instruções também são mostradas na captura de tela abaixo:

image-73

Passo 4: adicionar configurações do Firebase a arquivos nativos em seu projeto Flutter

Agora, para habilitar os serviços do Firebase em nosso aplicativo Android, precisamos adicionar o plug-in do google-services aos nossos arquivos Gradle.

Primeiro, em nosso arquivo Gradle de nível raiz (nível de projeto) (android/build.gradle), precisamos adicionar regras para incluir o plug-in do Gradle aos serviços do Google. Precisamos verificar se as seguintes configurações estão disponíveis ou não:

buildscript {
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
  }
  dependencies {
    ...
    // Adicione esta linha
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Verifique se você tem a seguinte linha (caso contrário, adicione-a):
    google()  // Repositório Google Maven
    ...
  }
}

Caso contrário, precisamos adicionar as configurações conforme mostrado no trecho de código acima.

Agora, em nosso arquivo Gradle do módulo (nível do aplicativo) (android/app/build.gradle), precisamos aplicar o plug-in do Gradle do Google Services.

Para isso, precisamos adicionar o trecho de código destacado no trecho de código a seguir ao arquivo ./android/app/build.gradle do nosso projeto:

// Adicione a seguinte linha:
**apply plugin: 'com.google.gms.google-services'**  // Plug-in do Google Services

android {
  // ...
}

Agora, precisamos executar o seguinte comando para que algumas configurações automáticas possam ser feitas:

flutter packages get

Com isso, integramos com sucesso as configurações do Firebase ao nosso projeto Flutter.

Passo 5: integrar o Firebase Messaging ao Flutter

Primeiro, precisamos adicionar a dependência firebase-messaging ao arquivo ./android/app/build.gardle. No arquivo, precisamos adicionar as seguintes dependências:

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-messaging:20.1.0'
}

Em seguida, precisamos adicionar uma action (ação) e uma category (categoria) como intent-filter (filtro de intenção) no arquivo ./android/app/src/main/AndroidManifest.xml:

<intent-filter>
    <action android:name="FLUTTER_NOTIFICATION_CLICK" />
    <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

Agora, precisamos criar um arquivo Java chamado Application.java no caminho /android/app/src/main/java/<app-organization-path>.

Em seguida, precisamos adicionar o código do seguinte trecho de código dentro dele:

package io.flutter.plugins.pushNotification;

import io.flutter.app.FlutterApplication;
import io.flutter.plugin.common.PluginRegistry;
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback;
import io.flutter.plugins.GeneratedPluginRegistrant;
import io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin;
import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService;

public class Application extends FlutterApplication implements PluginRegistrantCallback {
    @Override
    public void onCreate() {
        super.onCreate();
        FlutterFirebaseMessagingService.setPluginRegistrant(this);
    }

    @Override
    public void registerWith(PluginRegistry registry) {
        FirebaseMessagingPlugin.registerWith(registry.registrarFor("io.flutter.plugins.firebasemessaging.FirebaseMessagingPlugin"));
    }
}

Agora, precisamos atribuir essa atividade Application à tag application do arquivo AndroidManifest.xml, conforme mostrado no snippet de código abaixo:

<application
        android:name=".Application"

Isso conclui nossa configuração do plug-in de mensagens do Firebase no código nativo do Android. Agora, vamos passar para o projeto Flutter.

Passo 6: instalar o pacote Firebase Messaging

Aqui, vamos usar o pacote [firebase_messaging], que você pode encontrar aqui. Para isso, precisamos adicionar o plug-in à opção de dependência do arquivo pubspec.yaml.

Precisamos adicionar a seguinte linha de código à opção de dependências:

firebase_messaging: ^7.0.3

Passo 7: implementar uma tela de IU simples

Agora, dentro da classe de widget com estado MyHomePage do arquivo main.dart, precisamos inicializar a instância FirebaseMessaging e algumas constantes, conforme mostrado no trecho de código abaixo:

String messageTitle = "Empty";
String notificationAlert = "alert";

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

A variável messageTitle receberá o título da mensagem de notificação e notificationAlert receberá a ação que foi concluída assim que a notificação aparecer.

Agora, precisamos aplicar essas variáveis ​​à função de construção dentro do corpo do widget Scaffold, conforme mostrado no trecho de código abaixo:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              notificationAlert,
            ),
            Text(
              messageTitle,
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }

Em seguida, precisamos executar o aplicativo Flutter executando o seguinte comando no terminal do projeto:

flutter run

Vamos obter o resultado que você vê na imagem abaixo:

image-74

Por enquanto, o título da notificação está vazio e o alerta também está conforme definido. Precisamos atribuir um valor adequado a eles assim que recebermos a mensagem de notificação.

Portanto, precisamos configurar o código para receber a notificação e usar a mensagem de notificação para exibi-la na tela.

Para isso, precisamos adicionar o código do seguinte trecho de código na função initiState:

@override
  void initState() {
    // TODO: implementar initState
    super.initState();

    _firebaseMessaging.configure(
      onMessage: (message) async{
        setState(() {
          messageTitle = message["notification"]["title"];
          notificationAlert = "New Notification Alert";
        });

      },
      onResume: (message) async{
        setState(() {
          messageTitle = message["data"]["title"];
          notificationAlert = "Application opened from Notification";
        });

      },
    );
  }

Aqui, usamos o método configure fornecido pela instância _firebaseMessaging que, por sua vez, fornece os retornos de chamada onMessage e onResume. Esses retornos de chamada fornecem a notificação message como parâmetro. A resposta message manterá o objeto de notificação como um objeto de mapa.

A função onMessage é acionada quando a notificação é recebida enquanto estamos executando o aplicativo. A função onResume é acionada quando recebemos o alerta de notificação na barra de notificação do dispositivo e abre o aplicativo por meio da própria notificação push. Nesse caso, o aplicativo pode ser executado em segundo plano ou não ser executado.

Agora, estamos todos equipados com o aplicativo Flutter. Só precisamos configurar uma mensagem no Firebase Cloud Messaging e enviá-la para o dispositivo.

Passo 8: criar uma Mensagem a partir do console do Firebase Cloud Messaging

Primeiro, precisamos voltar ao console do Cloud Messaging no site do Firebase, conforme mostrado na imagem abaixo:

image-75

Aqui, podemos ver a opção 'Enviar sua primeira mensagem' (Send your first message, em inglês) na janela, pois não configuramos nenhuma mensagem antes. Precisamos clicar nele, o que nos levará à seguinte janela:

image-76

Aqui, podemos inserir o título, texto, imagem e nome da notificação. O título que definimos aqui será fornecido como título no objeto message nos retornos de chamada que definimos antes no projeto Flutter.

Depois de definir os campos obrigatórios, podemos clicar em 'Avançar' (Next, em inglês), o que nos levará à seguinte janela:

image-77

Aqui, precisamos fornecer nosso aplicativo de destino e clicar em 'Avançar' (Next).

Para Agendamento (Scheduling, em inglês) podemos manter a opção padrão:

image-78

Em seguida, aparecerá a janela Conversão (Conversion, em inglês), que também podemos manter como padrão, e clique no botão 'Avançar' (Next).

Por fim, aparecerá uma janela onde precisamos inserir os dados personalizados, na qual podemos definir o title e o click_action. Este evento de ação de clique é acionado sempre que clicamos na notificação que aparece na barra de notificação do dispositivo.

Depois de clicar na mensagem de notificação da barra de notificação, o aplicativo será aberto e o retorno de chamada onResume será acionado, definindo o title conforme atribuído nos dados personalizados na captura de tela abaixo:

image-79

Agora, estamos prontos para enviar a primeira mensagem de notificação ao dispositivo. Primeiro, vamos tentar com o dispositivo rodando no emulador.

Ao clicar no botão 'Revisar' (Review, em inglês) e enviar a mensagem, obteremos o seguinte resultado no console do Cloud Messaging, bem como no emulador:

pushGIF1

Aqui, podemos ver que o título e o alerta de notificação na tela do emulador são atualizados assim que enviamos uma mensagem do console. Podemos ter certeza de que o retorno de chamada onMessage foi acionado no aplicativo após receber a mensagem de notificação.

Agora vamos tentar com o app rodando em segundo plano. Uma vez que enviamos a mensagem para o console, nós iremos receber o resultado conforme mostrado na demonstração abaixo:

pushGIF2

Aqui, assim que enviamos a mensagem, recebemos uma notificação push na barra de notificações do dispositivo. Então, à medida que arrastamos a barra de notificação, podemos ver o título e o texto da mensagem de notificação. E, clicando na mensagem de notificação, podemos iniciar o aplicativo e exibir os dados personalizados na tela. Isso garante que nosso retorno de chamada onResume foi acionado.

Terminamos! Adicionamos com sucesso um recurso de notificação por push em nosso aplicativo Flutter usando o Firebase Cloud Messaging.

Conclusão

As notificações push são essenciais em qualquer aplicativo. Elas podem ser usadas ​​para alertar os usuários sobre o que está acontecendo no aplicativo e podem ajudar a atrair o interesse dos usuários de volta ao aplicativo.

Além disso, o Firebase Cloud Messaging torna o envio de alertas de notificação muito mais simples e fácil.

Neste tutorial, começamos configurando o aplicativo Firebase e, em seguida, passamos para a configuração e implementação da configuração de mensagens do Firebase no aplicativo Flutter. Por fim, conseguimos enviar alertas de notificação para o aplicativo usando o Firebase Cloud Messaging.

O tutorial foi feito para ser simples e fácil de entender. Espero que isso ajude você a adicionar notificações push aos seus aplicativos Flutter. Quer ver alguns exemplos de como você pode implementar tudo isso? Confira esses poderosos modelos do Flutter.