Advanced notifications in FlutterFlow with Firebase

Introduction

Sending notifications in FlutterFlow using Firebase is straightforward with the built-in “Send Notification” action. However, for more advanced control, such as sending notifications based on specific parameters, at scheduled times, or between multiple apps connected to the same backend, you need a more sophisticated system. This guide will walk you through setting up an advanced notification system using API calls and Cloud Functions, providing you with the flexibility and control you need. 

Why advanced notifications?

Imagine you have an Uber-like system with separate apps for drivers and users. When a driver accepts a ride in the “Uber Driver” app, the user should receive a notification in the “Uber” app. The built-in notification system in FlutterFlow doesn’t support this cross-app communication, but with this advanced setup, you can achieve this seamlessly.

Setting up notifications in FlutterFlow

FlutterFlow’s push notification functionality is essentially a Cloud Function triggered by a document insert into the “ff_push_notifications” (or “ff_user_push_notifications”) collection. Here’s how you can replicate and enhance this setup.

Creating a Cloud Function for notifications

1.   Create a Cloud Function:

• This function will handle the insertion of documents into the “ff_push_notifications” collection.
• Use Firebase Cloud Functions (inside FlutterFlow) to create this custom function.

The function could look something like this (the function below isn’t the complete function):

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.sendNotification = functions.https.onCall(async (data, context) => {
  const { userId, title, body } = data;

  await admin.firestore().collection('ff_push_notifications').add({
    userId: userId,
    title: title,
    body: body,
    timestamp: admin.firestore.FieldValue.serverTimestamp()
  });

  return { success: true };
}); 

 2.   Deploy the Function:

• Deploy the Cloud Function inside FlutterFlow.
• This function listens for HTTPS calls to insert a notification document. 

Triggering notifications from FlutterFlow

1.   API call setup:

• In FlutterFlow, set up an API call to trigger the Cloud Function.
• Use the endpoint provided by Firebase after deploying the function.
• This will instantly fire the Cloud Function which will fire the notification.

2.   CloudFunction action:

• Alternatively, you can use the “Cloud Function”action inside FlutterFlow to call the Cloud Function directly.
• This action can be added to any user interaction or automated workflow within FlutterFlow. 

Automating and personalizing notifications

By integrating Google Tasks and Cloud Functions, you can automate the entire notification process. Personalize the content based on user data, schedule reminders, and ensure that notifications are sent even if users are not actively using the app. E.g., if a user starts an order but doesn’t finish it, you might want to remind them in 15 minutes.

Scheduling notifications with Google Tasks

Use Google Tasks to manage and schedule notifications. Your Google Tasks might look something like this:

These are all queued up to be sent at specific times. When the time comes, these functions trigger a proxy function, which is just a function that does the same thing but are “onRequest” functions, not “on Call” functions.

Conclusion

Advanced notification systems in FlutterFlow provide the flexibility and control needed for complex applications. Whether you need cross-app communication, scheduled notifications, or personalized messages, this setup allows you to manage notifications effectively. Our marketplace item includes a fully functional implementation of this system, ready to be implemented in to your app!