Push notifications: How to implement them by using Firebase in Flutter

Push notifications are one of the main things that make your Flutter application better in the user’s eyes. Also, this is such an excellent way for every eCommerce store to integrate its own app to become better in sales. So, if using them correctly, they can be a unique way to drive user engagement and keep your app in focus consistently. Yet, if misusing them, they can be annoying and motivate users to uninstall your app and never look back.

Firebase Push notifications in Flutter
Firebase Push notifications in Flutter

After all, push notifications are a high possibility to bring your app back into your users’ minds and to increase the retention rate. So, here’s the question. How to implement push notifications by using Firebase in Flutter? This article may be your answer. Now, we – ArrowHiTech would like to introduce to you guys the guide on how to implement them by using Firebase feature in Flutter app development.

But first, let’s go to the definition.

What are push notifications?

Push notifications definitions
Push notifications definitions

Push notifications, to be more exact, are short in-apps, or web-based pop-up messages. We can use push notifications for various purposes: from sending system messages and in-app updates to promotions. The key idea of sending push notifications is to provide users with more value and keep them engaged. In Flutter app development, this is one of the most important features of application programming.

How to implement push notifications by using Firebase in Flutter?

This article assumes that you have an existing Flutter project or that a new one was created, for example, with the Flutter standard project template. Let’s get into the details.

Step #1: Creating a Firebase project

If you want to send your push notifications with Firebase Cloud Messaging, this requires a Firebase project. If you do not have one yet, create yours at firebase.google.com. That way, you will have a decent start for creating a Firebase project.

Step #2: Integrating firebase_messaging package for push notifications

After having your Firebase project, the Firebase Cloud Messaging Google’s Flutter team provided the “firebase_messaging” package. Add the package dependency to your project’s “pubspec.yaml” and load it by runningflutter pub get. As a result, it can be divided into two types of app development:

Android configurations

On the Android side, the Google Services Gradle Plugin needs to be included in the Gradle configuration. Simply add the following line to the “dependencies” section of your “android/build.gradle” file. It should go a little bit like this:

classpath ‘com.google.gms:google-services:x.x.x’

Then, in order to activate the plugin add the line following line to the end of your “android/app/build.gradle”, you need to apply plugin: ‘com.google.gms:google-services’. Next, create an Android-App in your Firebase-Project’s “Project Overview” section. If the app should open when the user taps on your push notifications, add the following intent filter inside of the activity element of your AndroidManifest.

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

iOS configurations

To send messages to iOS devices, Firebase Cloud Messaging uses the Apple Push Notification Service (APNs). Using these services requires an Apple Developer Account and an Apple Push Notification Authentication Key.

As with Android, we now need to create an iOS project in the Firebase console. The requested iOS -Bundle-ID can be found in XCode under “Runner > Target (Runner) > General”. Next, the previously downloaded Authentication Key needs to be full in your Firebase project’s “Cloud Messaging” settings. It should go something like this when you activate push notifications.

Push notifications results

Step #3: Sending push notifications with the Firebase console

We’ve come a long way in the configuration in different templates. After going through these above steps, push notifications can now be sent from the Firebase console. To do this, select “Cloud Messaging” in the console’s navigation. Now click on the “Send your first message” button to open the form. It should go something a little bit like this:

Using push notifications in firebase console
Using them in Firebase console

A click on the “Send test message” button opens a dialog that lets you select specific devices to send the test notifications. Then, enter the Firebase Messaging token here imprinted to the console as part of the initialization. You need to enter all the details, make sure your app is in the background or completely closed. Enter a title, and a message, then go next until you hit review. Review the message and then send it off.

Related post: Unit test: What is it and how to use it in Flutter

Final words

That should be it! Here’s the complete guide on how to implement push notifications by using Firebase in Flutter app development. All in all, after reading this article, you will have comprehensive knowledge about notifications basics, setting up and handling custom logic for your notifications. As a result, your Flutter app development will be much more developed in sales and conversions.