Flutter a devenit rapid unul dintre cele mai populare cadre pentru dezvoltarea de aplicații mobile pe mai multe platforme. Ajută dezvoltatorii să construiască UI-uri native cu suport pentru diferite dimensiuni ale dispozitivului, densități de pixeli și orientări, creând o interfață UI / UX frumoasă, perfectă pentru pixeli.

În acest tutorial, vom învăța cum să adăugăm notificări push la o aplicație Flutter folosind Firebase Cloud Messaging. Acest tutorial se va ocupa doar de configurarea pentru Platforma Android.

În primul rând, ce sunt notificările push?

Notificările push sunt un fel de mediu de mesaje pop-up care alertează utilizatorii aplicației cu privire la ceea ce se întâmplă în aplicație. Ele sunt, de asemenea, o modalitate importantă de a amplifica implicarea utilizatorilor în aplicația dvs.

De exemplu, să spunem că un utilizator uită de aplicație după ce a instalat-o. Apoi, puteți utiliza notificările push ca mecanism pentru a-și recâștiga și păstra interesul. Notificările push vă ajută, de asemenea, să conduceți trafic către aplicația dvs.

Firebase Cloud Messaging este un serviciu oferit de Firebase care vă permite să trimiteți aceste notificări utilizatorilor dvs. Puteți configura diverse configurații pentru a trimite notificări diferite către diferite segmente de public în funcție de timp și rutină.

Datorită tuturor acestor beneficii, îl vom folosi pentru a trimite notificări aplicației noastre Flutter.

Pasul 1: Creați un proiect Flutter

În primul rând, vom crea un proiect de flutter. Pentru aceasta, trebuie să avem Flutter SDK instalat în sistemul nostru. Puteți găsi pași simpli pentru instalarea flutter în oficial documentație.

După ce ați instalat cu succes Flutter, puteți rula pur și simplu următoarea comandă în directorul dorit pentru a configura un proiect Flutter complet:

flutter create pushNotification

După ce ați configurat proiectul, navigați în directorul proiectului. Executați următoarea comandă în terminal pentru a rula proiectul fie pe un emulator disponibil, fie pe un dispozitiv real:

flutter run

După o construire reușită, veți obține următorul rezultat în ecranul emulatorului:

Cum se adauga notificari push la o aplicatie Flutter folosind

Pasul 2: Integrarea configurației Firebase cu Flutter

În acest pas, vom integra serviciile Firebase cu proiectul nostru Flutter. Dar mai întâi, trebuie să creăm un proiect Firebase. Instrucțiunile de configurare sunt, de asemenea, furnizate în oficial documentație Firebase pentru Flutter.

Pentru a crea un proiect Firebase, trebuie să ne conectăm la Firebase și navigați la consolă. Acolo putem pur și simplu să faceți clic pe „Adăugați un proiect” pentru a începe proiectul nostru.

Apoi va apărea o fereastră prin care se cere să introduceți numele proiectului. Aici, am păstrat numele proiectului ca FlutterPushNotification așa cum se arată în captura de ecran de mai jos:

1611234788 119 Cum se adauga notificari push la o aplicatie Flutter folosind

Putem continua cu următorul pas când proiectul a fost creat. După ce proiectul a fost configurat, vom primi o consolă de proiect așa cum se arată în captura de ecran de mai jos:

1611234788 297 Cum se adauga notificari push la o aplicatie Flutter folosind

Aici, vom configura Firebase pentru platforma Android. Deci, trebuie să facem clic pe pictograma Android afișată în captura de ecran de mai sus. Acest lucru ne va conduce la interfață pentru a înregistra Firebase cu proiectul nostru de aplicație Flutter.

Pasul 3: Înregistrați Firebase în aplicația dvs. Android

Deoarece procesul de înregistrare este specific platformei, vom înregistra aplicația noastră pentru platforma Android. După ce faceți clic pe pictograma Android, vom fi direcționați către o interfață care solicită Numele pachetului Android.

Pentru a adăuga numele pachetului proiectului nostru Flutter, trebuie să îl localizăm mai întâi. Numele pachetului va fi disponibil în ./android/app/build.gradle fișierul proiectului dvs. Flutter. Veți vedea așa ceva:

com.example.pushNotification

Trebuie doar să îl copiem și să-l lipim în câmpul de introducere a numelui pachetului Android așa cum se arată în captura de ecran de mai jos:

1611234788 345 Cum se adauga notificari push la o aplicatie Flutter folosind

După aceea, putem face clic pe butonul „Înregistrați aplicația”. Acest lucru ne va conduce la interfața de unde putem obține google-services.json fișier care va conecta aplicația noastră Flutter la serviciile Google Firebase.

Trebuie să descărcăm fișierul și să-l mutăm în ./android/app directorul proiectului nostru Flutter. Instrucțiunile sunt de asemenea afișate în captura de ecran de mai jos:

1611234788 621 Cum se adauga notificari push la o aplicatie Flutter folosind

Pasul 4: Adăugați configurații Firebase la fișiere native în proiectul dvs. Flutter

Acum, pentru a activa serviciile Firebase în aplicația noastră pentru Android, trebuie să adăugăm plugin pentru serviciile google la fișierele noastre Gradle.

În primul rând în nivel de rădăcină (nivel de proiect) Fișier Gradle (android / build.gradle), trebuie să adăugăm reguli pentru a include pluginul Google Services Gradle. Trebuie să verificăm dacă următoarele configurații sunt disponibile sau nu:

buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.4'
  }
}

allprojects {
  ...
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    ...
  }
}

Dacă nu, trebuie să adăugăm configurațiile așa cum se arată în fragmentul de cod de mai sus.

Acum, în modulul nostru (la nivel de aplicație) fișier Gradle (android / app / build.gradle), trebuie să aplicăm Servicii Google Gradle conecteaza.

Pentru aceasta, trebuie să adăugăm bucata de cod evidențiată în următorul fragment de cod la ./android/app/build.gradle fișierul proiectului nostru:

// Add the following line:
**apply plugin: 'com.google.gms.google-services'**  // Google Services plugin

android {
  // ...
}

Acum, trebuie să executăm următoarea comandă, astfel încât să se poată face unele configurații automate:

flutter packages get

Cu aceasta am integrat cu succes configurațiile Firebase în proiectul nostru Flutter.

Pasul 5: Integrarea mesajelor Firebase cu Flutter

Mai întâi, trebuie să adăugăm dependența de mesaje firebase la ./android/app/build.gardle fişier. În fișier, trebuie să adăugăm următoarele dependențe:

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

Apoi, trebuie să adăugăm un action și a category ca un intent-filter în cadrul activity eticheta în ./android/app/src/main/AndroidManifest.xml fișier:

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

Acum, trebuie să creăm un fișier Java numit Application.java în cale / android / app / src / main / java / .

Apoi, trebuie să adăugăm codul din următorul fragment de cod din interior:

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"));
    }
}

Acum, trebuie să atribuim acest lucru Application activitate la application eticheta de AndroidManifest.xml fișier așa cum se arată în fragmentul de cod de mai jos:

<application
        android:name=".Application"

Aceasta completează configurarea pluginului de mesagerie Firebase în codul nativ Android. Acum, vom trece la proiectul Flutter.

Pasul 6: Instalați pachetul de mesagerie Firebase

Aici vom folosi [firebase_messaging]pachet, care gasesti aici. Pentru aceasta, trebuie să adăugăm pluginul la opțiunea de dependență a fișierului pubspec.yaml.

Trebuie să adăugăm următoarea linie de cod la opțiunea de dependențe:

firebase_messaging: ^7.0.3

Pasul 7: Implementați un ecran UI simplu

Acum, în interiorul MyHomePage clasa widget de stare a main.dart fișier, trebuie să inițializăm fișierul FirebaseMessaging instanță și câteva constante așa cum se arată în fragmentul de cod de mai jos:

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

FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

messageTitle variabila va primi titlul mesajului de notificare și notificationAlert i se va atribui acțiunea care a fost finalizată odată ce notificarea apare.

Acum, trebuie să aplicăm aceste variabile funcției de construire din interiorul Scaffold corpul widgetului, așa cum se arată în fragmentul de cod de mai jos:

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,
            ),
          ],
        ),
      ),
    );
  }

Apoi, trebuie să rulăm aplicația Flutter executând următoarea comandă în terminalul proiectului:

flutter run

Vom obține rezultatul pe care îl vedeți în imaginea de mai jos:

1611234789 995 Cum se adauga notificari push la o aplicatie Flutter folosind

Deocamdată, titlul notificării este gol, iar alerta este, de asemenea, definită. Trebuie să le atribuim o valoare adecvată după ce primim mesajul de notificare.

Deci, trebuie să configurăm codul pentru a primi notificarea și să folosim mesajul de notificare pentru a-l afișa pe ecran.

Pentru aceasta, trebuie să adăugăm codul din următorul fragment de cod în initiState funcţie:

@override
  void initState() {
    // TODO: implement 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";
        });

      },
    );
  }

Aici, am folosit configure metodă furnizată de _firebaseMessaging exemplu care la rândul său oferă onMessage și onResume apeluri de apel. Aceste apeluri de apel furnizează notificarea message ca parametru. message răspunsul va deține obiectul de notificare ca obiect de hartă.

onMessage funcția se declanșează la primirea notificării în timp ce rulăm aplicația. onResume funcția se declanșează atunci când primim alerta de notificare în bara de notificare a dispozitivului și deschidem aplicația prin notificarea push în sine. În acest caz, aplicația poate rula în fundal sau deloc.

Acum suntem cu toții echipați cu aplicația Flutter. Trebuie doar să configurăm un mesaj în Firebase Cloud Messaging și să îl trimitem la dispozitiv.

Pasul 8: Creați un mesaj din consola de mesagerie Cloud Firebase

Mai întâi, trebuie să ne întoarcem la consola Cloud Messaging de pe site-ul Firebase așa cum se arată în imaginea de mai jos:

1611234789 159 Cum se adauga notificari push la o aplicatie Flutter folosind

Aici, putem vedea opțiunea „Trimite primul mesaj” în fereastră, deoarece nu am configurat niciun mesaj înainte. Trebuie să facem clic pe acesta, ceea ce ne va conduce la următoarea fereastră:

1611234789 560 Cum se adauga notificari push la o aplicatie Flutter folosind

Aici putem introduce titlul, textul, imaginea și numele notificării. Titlul pe care l-am setat aici va fi furnizat ca titlu în message obiect pe apelurile pe care le-am setat anterior în proiectul Flutter.

După setarea câmpurilor obligatorii, putem face clic pe „Următorul”, care ne va conduce la următoarea fereastră:

1611234789 823 Cum se adauga notificari push la o aplicatie Flutter folosind

Aici, trebuie să furnizăm aplicația noastră țintă și să facem clic pe „Următorul”.

Pentru programare putem păstra opțiunea implicită:

1611234789 432 Cum se adauga notificari push la o aplicatie Flutter folosind

Apoi, va apărea fereastra de conversie pe care o putem păstra și ca implicită, apoi faceți clic pe butonul „Următorul”.

În cele din urmă, va apărea o fereastră în care trebuie să introducem datele personalizate în care putem seta title și click_action. Acest eveniment cu acțiune de clic este declanșat ori de câte ori facem clic pe notificarea care apare în bara de notificare a dispozitivului.

După ce faceți clic pe mesajul de notificare din bara de notificare, aplicația se va deschide și onResume se va declanșa apelul, setarea title așa cum este atribuit în datele personalizate din captura de ecran de mai jos:

1611234789 234 Cum se adauga notificari push la o aplicatie Flutter folosind

Acum suntem gata să trimitem primul mesaj de notificare pe dispozitiv. Mai întâi, să încercăm cu dispozitivul care rulează în emulator.

Când facem clic pe butonul „Revizuire” și trimitem mesajul, vom obține următorul rezultat în consola Cloud Messaging, precum și în emulator:

Cum se adauga notificari push la o aplicatie Flutter folosind

Aici, putem vedea că titlul și alerta de notificare de pe ecranul emulatorului sunt actualizate de îndată ce trimitem un mesaj de pe consolă. Putem fi siguri că onMessage apelarea a fost declanșată în aplicație după primirea mesajului de notificare.

Acum să încercăm cu aplicația care rulează în fundal. Pe măsură ce trimitem mesajul de pe consolă, vom obține rezultatul așa cum se arată în demo-ul de mai jos:

1611234789 288 Cum se adauga notificari push la o aplicatie Flutter folosind

Aici, imediat ce trimitem mesajul, primim o notificare push în bara de notificare a dispozitivului. Apoi, în timp ce tragem în jos bara de notificare, putem vedea titlul și textul mesajului de notificare. Și, făcând clic pe mesajul de notificare, putem lansa aplicația și afișa datele personalizate pe ecran. Acest lucru asigură faptul că onResume apelarea a fost declanșată.

Și am terminat! Am adăugat cu succes o funcție de notificare push în aplicația noastră Flutter folosind Firebase Cloud Messaging.

Concluzie

Notificările push sunt esențiale în orice aplicație. Acestea pot fi folosite pentru a avertiza utilizatorii cu privire la ceea ce se întâmplă în aplicație și pot ajuta să atragă interesul utilizatorilor înapoi la aplicație.

În plus, Firebase Cloud Messaging face trimiterea alertelor de notificare mult mai simplă și mai ușoară.

În acest tutorial, am început prin configurarea aplicației Firebase și apoi am trecut la configurarea și implementarea configurației de mesagerie Firebase în aplicația Flutter. În cele din urmă, am putut trimite alerte de notificare către aplicație folosind Firebase Cloud Messaging.

Tutorialul a fost menit să fie simplu și ușor de înțeles. Sper că vă ajută să adăugați notificări push la aplicațiile Flutter. Doriți să vedeți câteva exemple despre cum puteți implementa toate acestea? Verificați aceste puternice Șabloane Flutter.