Push notifications in FlutterFlow

Push notifications can be hard work but are powerful differentiators between apps that are just toys and production apps that deliver value.

Push notifications add real depth to your FlutterFlow based app. Push requires Firebase Cloud Messaging (FCM) from Google. FCM is a cross-platform messaging solution that lets you reliably send messages at no cost. This article assumes you have Firebase working. FlutterFlow presents a simplified approach to this which you can build upon effectively using Firebase cloud messaging. But you will still need to pay careful attention to the management of certificates and provisioning profiles.

TL:DR — FlutterFlow apps with push notifications really stand out as professional apps. Push can be hard work. FlutterFlow makes it as simple as it is possible to make it work but there are a lot of moving parts.

Things you will need

• An Apple developer account. This can be a complex process. Make sure you get the right organisation naming as it can't be easily changed.
• Firebase account on the Blaze plan. Firebase needs to deploy cloud functions, and Firebase Cloud Messaging needs to know how to sent your push notifications, so there is some configuration to do here.
• A Mac for iOS builds and an iOS device. You can't really avoid this, but any Mac and any iPhone since 2020 or so will do. 

Enable Push Notifications in FlutterFlow

• In App Settings, choose Push notifications and 'Enable Push Notifications'. 
• Click 'Deploy' and that will set up the cloud functions needed to make this functionality work.

Firebase project in FlutterFlow

All that is needed to implement push notifications with Firebase Cloud Messaging is to enable Firebase Authentication in your FlutterFlow app. Firebase Authentication has many capabilities, and Anonymous sign-in lets you create and use temporary anonymous accounts to authenticate with Firebase. These temporary anonymous accounts can be used to allow users who haven't yet signed up to your app to work with data protected by security rules.

Anonymous sign-in creates a user unique identifier so that you can reach the particular device. It doesn't 'know' anything else about the device. This is sufficient to register the device as eligible for Push notifications, which will be delivered by FCM to devices correctly set up and eligible to receive them.

Configure your FlutterFlow app with Apple Developer certificates

 

 

• Go to developer.apple.com 
• Select 'Keys' from 'Certificate, IDs and Profiles, and press 'Create a key' or the blue plus symbol
• Choose Apple Push Notifications service (APNs)
• Give your key a name, and a description and press continue
• Download your key and upload it to the Firebase console
• Once it is applied you'll see it in the Firebase console
• You only get to download they key one time so don't close your browser until you've succeeded
• Then click on Identifiers, and find your App ID, then click it and scroll to Push Notifications and enable it and save
• These steps are fiddly, but once completed are reliable and allow control of your environment

Add your Apple Developer certificates to your App's Firebase Cloud Messaging project

Image2 

Send a push notification to a real iOS device and verify receipt!

If you got through all of that, then you can send a push to your device.

Being able to send push notifications is a strong feature for FlutterFlow, and really shows the depth of the platform.