FlutterFlow Docs
Search…
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.
FlutterFlow uses Firebase Cloud Messaging (A Firebase product) to send push notifications.

Prerequisites

Before getting started with this section, ensure you have:
These steps are prerequisites if you want to send push notifications to iOS devices:
Make sure you select development certificates in order to test on a real device.

Enabling Push Notification In FlutterFlow

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.
  • Click on the Push Notifications tab.
  • 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.
After a successful deployment of cloud functions it should look like the following:

Configuring iOS app

To receive the push notifications in an iOS app, you need to perform a few additional steps.

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.

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.

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.
After configuring the iOS, use the instructions here to 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.

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.

​

Last modified 10d ago