How to Build a Pet Care App with Reminders and Records in FlutterFlow

Create a pets collection with fields: userId (String), name (String), species (String: dog, cat, bird, other), breed (String), birthDate (Timestamp), weight (double), photoUrl (String). Under each pet, create a medical_records subcollection with fields: type (String: vaccination, checkup, surgery, medication), title (String), date (Timestamp), vetName (String), notes (String), documentUrl (String, for PDF or image attachments). Create a reminders subcollection with fields: title (String), type (String: feeding, medication, vet_visit, grooming), recurringSchedule (String: daily, weekly, monthly), nextDueDate (Timestamp), isActive (bool). Add 2-3 sample pets with varied records.

Create a PetsPage. Query the pets collection filtered by userId equals current user. Display pets in a horizontal ScrollView or TabBar at the top, each tab showing the pet photo and name. Below, show the selected pet's profile: CircleImage for the photo with a camera overlay icon for updating via FlutterFlowUploadButton, the pet name, species and breed Text, calculated age using a Custom Function that returns 'X years Y months' from birthDate (handling pets under 1 year as 'X months'), and current weight. Add an Edit button that toggles between display Text and editable TextFields for name, breed, and weight. Include an Add Pet button in the TabBar that opens a form for registering a new pet.

Below the pet profile, add a Medical Records section. Query the medical_records subcollection for the selected pet, ordered by date descending. Display records in a ListView styled as a timeline: each item shows a vertical line on the left with a colored dot (green for vaccination, blue for checkup, red for surgery, orange for medication), the date, title, vet name, and a truncated notes preview. Tap a record to expand or navigate to a detail view showing full notes and an attached document (Image or PDF viewer). Add a floating action button to create a new medical record with fields for type DropDown, title, date DateTimePicker, vet name, notes, and a FlutterFlowUploadButton for document attachments.

Add a Reminders tab or section on the pet profile page. Query the reminders subcollection where isActive equals true, ordered by nextDueDate ascending. Display each reminder in a Card showing the title, type icon (food bowl for feeding, pill for medication, stethoscope for vet_visit, scissors for grooming), next due date, and recurring schedule label. Color the card amber if the due date is today, red if overdue. Add a Switch to toggle isActive. To create a new reminder, open a form with title TextField, type DropDown, recurringSchedule DropDown (daily, weekly, monthly), and starting date DateTimePicker.

Create a scheduled Cloud Function that runs daily at 8 AM. The function queries all reminders where nextDueDate is today or earlier and isActive is true. For each due reminder, it looks up the pet name and owner's FCM token, sends a push notification with the message 'Time for [pet name]'s [reminder title]', and then updates nextDueDate based on the recurringSchedule: for daily add 1 day, for weekly add 7 days, for monthly add 1 month. In FlutterFlow, ensure push notifications are enabled in Settings and the user's FCM token is stored on their user document.

1// Cloud Function: checkPetReminders (scheduled daily)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.checkPetReminders = functions.pubsub
7  .schedule('0 8 * * *')
8  .onRun(async () => {
9    const now = admin.firestore.Timestamp.now();
10    const petsSnap = await admin.firestore().collection('pets').get();
11
12    for (const petDoc of petsSnap.docs) {
13      const reminders = await petDoc.ref
14        .collection('reminders')
15        .where('isActive', '==', true)
16        .where('nextDueDate', '<=', now)
17        .get();
18
19      for (const rem of reminders.docs) {
20        const pet = petDoc.data();
21        const userDoc = await admin.firestore()
22          .collection('users').doc(pet.userId).get();
23        const fcmToken = userDoc.data().fcmToken;
24
25        if (fcmToken) {
26          await admin.messaging().send({
27            token: fcmToken,
28            notification: {
29              title: `${pet.name} Reminder`,
30              body: `Time for ${pet.name}'s ${rem.data().title}`,
31            },
32          });
33        }
34
35        // Update nextDueDate based on schedule
36        const schedule = rem.data().recurringSchedule;
37        const next = rem.data().nextDueDate.toDate();
38        if (schedule === 'daily') next.setDate(next.getDate() + 1);
39        else if (schedule === 'weekly') next.setDate(next.getDate() + 7);
40        else if (schedule === 'monthly') next.setMonth(next.getMonth() + 1);
41        await rem.ref.update({ nextDueDate: admin.firestore.Timestamp.fromDate(next) });
42      }
43    }
44  });