Push Notification in Flutter uses Firebase Cloud Messaging.

Tram Ho

Hi everyone today I will write an article about Push Notification in a Flutter mobile app. Before going into the tutorial I will remind you a little about Push Notification to remind everyone to remember ? .

What is Push Notification?

Push notifications are messages sent by the server to the client through a cloud message gateway and from this port will notify our computer that there are new notifications and display them. Therefore, it is required to have internet for push notification.

Why use Push Notification

  • Usually a notification is automatically enabled to notify the user that the application has completed a certain job. Or you can send promotional information to your customers, invite customers to attend an event … –
  • When building a mobile application, push notification is a function that must not be ignored, it will make your application become (better).

This is briefly followed by the main part of this article, everyone learn offline.

Install Push Notification

Because Flutter is a cross-platform framework, we will have to configure on both Android and iOS files and here I only configure on mobile. ?

Before installing Push Notification, everyone must link to Firebase to do this part.

Reference link: https://viblo.asia/p/lien-ket-firebase-den-app-flutter-cho-android-va-ios-RnB5p6zdZPG

General settings

Everyone goes to pubspect.yaml file and adds the code below

Then type in command line packages get to sync the config file again.

Install on Android

You go to the file android/build.gradle add the following:

In the path to android/app/build.gradle apply plugin below

To be able to handle background messages, Google recommends adding new versions.

Go into AndroidManifest.xml and add an intent as follows:

Create an Application.java or Application.kt class (if everyone uses Kotlin) in a folder containing MainActivity with the following content:

Create another FirebaseCloudMessagingPluginRegistrant class in the same directory as Application.java with the following content.

In the MainActivity.java file, comment its content.

Finally, go to AndroidManifest.xml and change the name of the <application> tag as follows

That's it, the installation steps for Android, now let's go to iOS.

Install on iOS

Open the ios/Runner/AppDelegate.m or the ios/Runner/AppDelegate.swift and add the following line inside (BOOL) application: (UIApplication *) application didFinishLaunchingWithOptions: (NSDictionary *) launchOptions method.

Code Demo

To make it easy, I will code on the main.dart file. I will create a method to be able to receive notifications when the app runs in the background.

Next create a Map<String, Items> to be able to map with the JSON string that FCM returns for me.

Create a Widget to display the details of the message received

Edit a little bit about Homepage

Conduct build and test. On the Home screen will be as follows:

Upon receiving the data, it will appear on the dialog.

And when the app runs in the background, it will display a notice outside the screen.

Thanks for watching.

Reference links :

https://pub.dev/packages/firebase_messaging

https://www.djamware.com/post/5e4b26e26cdeb308204b427f/flutter-tutorial-firebase-cloud-messaging-fcm-push-notification

Github: https://github.com/didinj/flutter-firebase-cloud-messaging-fcm-push-notification-example.git

Share the news now

Source : Viblo