Push Notifications

Push notifications allow you to send timely and relevant information to a user's phone. They are delivered to users regardless of whether or not they have your app open. From this page, you can enable the push notification feature in your app. After enabling it, you can send the push notification instantly or schedule it to be delivered to the user's device at a specific time.
FlutterFlow uses Firebase Cloud Messaging (A Firebase product) to send push notifications.
Push Notification
Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup section for your project.
Add a Blaze plan to your Firebase project.
These steps are prerequisites if you want to send push notifications to iOS devices:
Created an Apple account.
​Purchased an Apple Developer membership. Please see this link for more details on the Apple Developer program and how to sign up.
Created iOS Distribution Certificate, App ID, and Provisioning Profile in Apple Developer Account. Here are the instructions on how to create if you haven't already done so. 
Make sure you select development certificates in order to test on a real device
Enabling push notification
Please note, push notifications will not work in these scenarios:
Push notifications will not work on an iOS simulator. To test you will need to use a real device.
Push notifications will not work if the user is not logged in to your app. You can add anonymous Firebase login to your app in order to send not logged in users push notifications.
Push notifications will not work if you have the app open on your device.
To send push notifications to your users, you need to enable Push Notification settings in FlutterFlow.
Here are the steps to enable Push notifications in FlutterFlow:
Click on the Settings and Integrations in the left side menu.
Under the App Settings, select the Push Notifications.
Find the Enable Push Notifications section and enable it. (Click on the Toggle button on the right)
Now, click on the Deploy button. This will create and deploy the Cloud Functions in your Firebase project that are necessary for push notifications to work.
Your Firebase project must be on the Blaze plan. Check out more information here on Blaze plans.
Enabling push notification
After a successful deployment of cloud functions it should look like the following:
Successful deployment
Configuring iOS app
To receive the push notifications in an iOS app, you need to perform the following additional steps.
1.​Creating a key​
2.​Add APNs key to Firebase project​
3.​Adding identifier​
1. Creating a key
Apple requires developers to create a key for the push notifications inside the Apple Developer Console to verify the push notification's sender.
To create a key:
Open your Apple developer account.
Click on the Certificates, Identifiers & Profiles card.
Click on keys in the left side menu.
Click on the (+) button on the right side of the Keys label.
Enter the Key Name.
Select the Apple Push Notifications service (APNs) from the list below.
Click on Continue and then Register.
Click Download and save the file. It will be needed to add to your Firebase project.
Creating a key
2. Add APNs key to Firebase project
To add APNs key to Firebase project:
From the Firebase dashboard from your project, navigate to the far left menu. Select Project Settings(
 ) --> Project Settings.
Select the Cloud Messaging tab.
Scroll down and find your iOS app under the Apple app configuration section.
Under the APNs Authentication Key section, click on Upload. A popup will appear to upload and enter the key details.
Click on the Browse button to locate and upload the APNs auth key file.
Enter the Key ID. You can find your Key ID in the Apple Developer Center under Certificates, Identifiers & Profiles -> Keys -> Click on Key.
Enter the Team ID. You can find your Team ID in the Apple Member Center under the membership tab.
Add APNs key to Firebase project
3. Adding identifier
You must add an Identifier to be able to send the push notifications to the iOS devices after you deploy your app to the app store.
To add an Identifier:
Open your Apple developer account.
Click on the Certificates, Identifiers & Profiles card.
Click on Identifiers in the left side menu.
Click on the (+) button on the right side of the Identifiers label.
Select the App IDs and click Continue.
Select the Type App and click Continue.
Enter the Description as ImageNotification.
Enter the Bundle ID as your package name and add .ImageNotification in the end.
Click Continue and then click Register.
Adding identifier
After configuring the iOS, send the push notifications to the iOS app.
Here's how it works in the iOS app:
Sending push notifications
Push notifications will not work in an iOS simulator. Instead, you will need to test this on a real device. 
Push notifications will not show if you have the application open.
Use these steps to create and send push notifications from FlutterFlow:
Click on the Settings and Integrations in the left side menu.
Click on the Push Notifications tab.
Find the Manually Trigger Notifications section and click on it to expand the section.
In the Notification Title, enter the text that you want to set as a title for notification.
In the Notification Text, enter the content of your notification.
Click on the Upload Notification Image to set the image that you want to appear in the notification. (Optional)
Find the Target Audience dropdown. Keep the All option selected if you want to send notifications to both Android and iOS users. You can select Android or iOS if you wish to target OS-specific users.
To send push notifications to a specific or few users, enter the user document reference (from the users collection in Firestore) into the User References.
Find the Initial Page dropdown and select a page that you would like to open when a user clicks on the notification.
Click on Send Notification.
To confirm you want send this notification, a popup will appear. You need to enter the text 'Send Notification' and click on the Send Notification again.
Sending push notifications
Push notifications with data
You may want to pass some data with push notifications and show more details about the data on the page (when the page opens via push notifications).
To send a push notification with data:
You must have a page that accepts a parameter of type record from the firestore collection.
Build a notification using the instructions here.
While building a notification scroll down to find the Initial Page section and select a page that accepts the parameter.
Find the Parameter Data section, copy the document reference from the Firestore and paste it into the input box below.
Click on Send Notification.
Sending push notification with data
Trigger Push Notification
You might want to send the push notification when something happens in your app. For example, sending the push notification on a message sent, a push notification on a new appointment booked, a push notification on a price change, etc. You can send the push notification on such event occurrence by adding the Trigger Push Notification action.
For a demonstration purpose, consider an example of sending the push notification to a post creator when someone comments on a post.
Trigger push notification
Here are the steps:
1.​Retrieve the document reference of the user​
2.​Build the UI​
3.​Adding the trigger push notification action​
1. Retrieve the document reference of the user
The document reference of the user points to the user document inside the users collection. It helps in retrieving the user's details for sending the push notification on the device (on which the user has logged in). 
You will need the user document reference somewhere stored in a variable while adding the action to trigger the push notification.
Ideally, you should get the user document reference from the Firestore document. The Firestore document might contain a field like created_by which stores the document reference of the user. But, for simplification purposes, let's just store the reference in a local state variable that looks like the below:
User document reference in local state variable
In case you need to send the push notifications to multiple users. For example, sending notifications to all users who liked the post when someone comments on a post. You can get the list/array of user document references from the Firestore document or from any local state variable of your app. The list of document references in a local state variable looks like the below:
Multiple user document references in local state variable
Learn more about working with Local state variables.
2. Build the UI
In this step, we'll build the UI that allows you to enter a comment and a button to send the comment.
Here are the steps:
Create/select the page.
Select the Column widget.
Add the TextField widget to enter a comment and give it a name.
Add the Button widget to send a comment.
Building UI
3. Adding the trigger push notification action
Add the action to trigger the push notification by visiting the following page.
Trigger Push Notification Action
Authentication
Mobile Deployment
Last modified 10mo ago