How can I create custom push notifications in FlutterFlow?

Step 1: Install and Setup FlutterFlow

Create a FlutterFlow account, if you don't already have one. After logging in, you'll be directed to the Dashboard. Click on Create a New Project. Name your project and start building your Firebase project. This process involves authenticating your Firebase project with FlutterFlow.

Step 2: Enable Firebase

To send push notifications from FlutterFlow, you need to enable Firebase in your Flutter project. Click on a project in the FlutterFlow dashboard. Here, select Project Settings from the dropdown menu in the top left corner of your screen. Then select the Integration tab and paste in your Firebase credentials.

Step 3: Set up Firebase Cloud Messaging

Firebase Cloud Messaging (FCM) enables you to send push notifications. From the Firebase Console, select the gear icon > Project settings > Cloud Messaging. The Token located under the Project Credentials section is what FlutterFlow needs to send push notifications.

Add this Server Key from Firebase Cloud Messaging to the FlutterFlow Firebase integration page and click Update Project.

Step 4: Create New Notification

Within your FlutterFlow project, on the left-side menu go to Notifications. This brings up the Notifications page. Click on the Create a New Notification button.

Provide a title for your notification; this will be the title of the push notification. You can then specify the body of the notification which will be the actual content your users will see when they receive the push notification.

Step 5: Define Trigger for notification

You can determine when your push notification should be sent out. Set conditions to trigger the notification. For instance, you could send notifications when a document is created, updated, or even based on custom criteria.

Step 6: Assign Audience

Designate the receivers for your push notification in the To section. You can select All users or designate specific users by adding their Firebase User UUID, or split your users into groups with User Collections.

Step 7: Add optional data payload

Optionally, add Key Value pairs as a data payload to your push notification.

Step 8: Save and Test

Click Save. You can now test out your created custom notification on your project. Enter your Firebase Cloud Message token in the Test Notification input box and click Test. Your test push notification should now be sent to your device.

Step 9: Enable notifications on client side

Finally, ensure that on the client’s side (the Flutter app), you have set permissions for receiving notifications.

You have now successfully created a custom push notification using FlutterFlow!