How to Set Up a Personalized Email Notification System in FlutterFlow

In Firestore, create an `email_templates` collection with fields: name (String, e.g. 'order_confirmed'), subject (String with placeholders like 'Order {{orderNumber}} Confirmed'), bodyHtml (String with HTML + placeholders like '{{userName}}', '{{orderTotal}}'), triggerEvent (String matching the event name), isActive (Boolean). On your existing users collection, add an emailPreferences map field with keys like orders, marketing, and updates, each set to true by default. In FlutterFlow's Data section, register both collections so they appear in queries and forms.

Create a new page or section on your existing Settings page. Add a Column with a heading Text 'Email Notifications'. Below it, add three Row widgets, each containing a Text label (Order Updates, Marketing Emails, App Updates) and a Switch widget. Bind each Switch's initial value to the corresponding field in the current user's emailPreferences map. On each Switch toggle, update the user document's emailPreferences map field with the new boolean value. Add a brief description Text below each toggle explaining what emails that category includes.

In your Firebase project's Cloud Functions directory, create a function triggered by Firestore events. For example, when a document is created in the `orders` collection with status 'confirmed', the function reads the user's emailPreferences to check if orders is true. If yes, it fetches the matching email_template by triggerEvent, replaces all placeholders in the subject and bodyHtml with actual values from the order and user documents, then sends the email via the SendGrid API using the @sendgrid/mail npm package. After sending, create a document in the `email_log` collection with userId, templateName, recipientEmail, sentAt timestamp, and status (sent/failed).

1const sgMail = require('@sendgrid/mail');
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6sgMail.setApiKey(functions.config().sendgrid.key);
7
8exports.sendOrderEmail = functions.firestore
9  .document('orders/{orderId}')
10  .onCreate(async (snap, context) => {
11    const order = snap.data();
12    const userDoc = await admin.firestore()
13      .collection('users').doc(order.userId).get();
14    const user = userDoc.data();
15
16    if (!user.emailPreferences?.orders) return;
17
18    const templateSnap = await admin.firestore()
19      .collection('email_templates')
20      .where('triggerEvent', '==', 'order_confirmed')
21      .where('isActive', '==', true)
22      .limit(1).get();
23
24    if (templateSnap.empty) return;
25    const template = templateSnap.docs[0].data();
26
27    const subject = template.subject
28      .replace('{{orderNumber}}', order.orderNumber);
29    const html = template.bodyHtml
30      .replace(/{{userName}}/g, user.displayName)
31      .replace(/{{orderNumber}}/g, order.orderNumber)
32      .replace(/{{orderTotal}}/g, `$${order.total.toFixed(2)}`);
33
34    await sgMail.send({
35      to: user.email,
36      from: 'noreply@yourapp.com',
37      subject,
38      html,
39    });
40
41    await admin.firestore().collection('email_log').add({
42      userId: order.userId,
43      templateName: template.name,
44      recipientEmail: user.email,
45      sentAt: admin.firestore.FieldValue.serverTimestamp(),
46      status: 'sent',
47    });
48  });

Create an admin-only page called EmailTemplates. Add a ListView bound to a Backend Query on the email_templates collection. Each list item shows the template name, subject line, trigger event, and an isActive toggle Switch. Add an Edit button on each item that navigates to an EmailTemplateEditor page. On that editor page, add TextFields for name, subject (with placeholder hint text showing {{userName}} syntax), a multiline TextField for bodyHtml, a DropDown for triggerEvent, and an isActive Switch. On save, update the Firestore document. Add a Preview button that replaces placeholders with sample data and displays the result in a Container with rendered HTML.

Create an EmailLog admin page with a ListView bound to the email_log collection ordered by sentAt descending. Each row displays the recipient email, template name, sent timestamp, and a color-coded status badge (green for sent, red for failed). Add a ChoiceChips filter at the top for status (All/Sent/Failed) and a DatePicker range filter. Add a Text widget at the top showing total emails sent today (aggregate query or count from filtered results). This gives your team visibility into email delivery performance.