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

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 30-40 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

Build a pet management app where each user can register multiple pets with profiles including species, breed, birth date, and weight. Each pet has a medical_records subcollection for vaccinations, checkups, and medications displayed as a timeline ListView. A reminders subcollection tracks feeding, medication, vet visits, and grooming with recurring schedules. A Cloud Function checks due reminders daily and sends push notifications. Multi-pet support uses a TabBar or horizontal scroll to switch between pets.

## Building a Pet Care Management App in FlutterFlow

This tutorial creates a comprehensive pet care app for pet owners to track their animals' health, schedule reminders, and maintain medical records. Each pet has a profile with calculated age, a weight history chart, and a medical timeline. Reminders ensure owners never miss feeding times, medications, or vet appointments. The app supports multiple pets per user. This pattern is useful for pet care businesses, veterinary clinics, and individual pet owners.

## Before you start

- A FlutterFlow project with Firestore and Firebase Cloud Messaging configured
- Basic understanding of subcollections and Backend Queries in FlutterFlow
- A Firebase project with Cloud Functions enabled (Blaze plan) for notifications
- Familiarity with TabBar and ListView in FlutterFlow

## Step-by-step guide

### 1. Create the Firestore data model for pets, medical records, and reminders

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.

**Expected result:** Firestore has pets with medical_records and reminders subcollections ready for the app.

### 2. Build the multi-pet selector and pet profile page

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.

**Expected result:** Users can switch between pets via tabs and view or edit each pet's profile with calculated age.

### 3. Display medical records as a timeline ListView

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.

**Expected result:** Medical records display as a color-coded timeline with expandable details and document attachments.

### 4. Build the reminders system with recurring schedules

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.

**Expected result:** Active reminders display sorted by due date with visual indicators for overdue and due-today items.

### 5. Set up Cloud Function push notifications for due reminders

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.

```
// Cloud Function: checkPetReminders (scheduled daily)
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.checkPetReminders = functions.pubsub
  .schedule('0 8 * * *')
  .onRun(async () => {
    const now = admin.firestore.Timestamp.now();
    const petsSnap = await admin.firestore().collection('pets').get();

    for (const petDoc of petsSnap.docs) {
      const reminders = await petDoc.ref
        .collection('reminders')
        .where('isActive', '==', true)
        .where('nextDueDate', '<=', now)
        .get();

      for (const rem of reminders.docs) {
        const pet = petDoc.data();
        const userDoc = await admin.firestore()
          .collection('users').doc(pet.userId).get();
        const fcmToken = userDoc.data().fcmToken;

        if (fcmToken) {
          await admin.messaging().send({
            token: fcmToken,
            notification: {
              title: `${pet.name} Reminder`,
              body: `Time for ${pet.name}'s ${rem.data().title}`,
            },
          });
        }

        // Update nextDueDate based on schedule
        const schedule = rem.data().recurringSchedule;
        const next = rem.data().nextDueDate.toDate();
        if (schedule === 'daily') next.setDate(next.getDate() + 1);
        else if (schedule === 'weekly') next.setDate(next.getDate() + 7);
        else if (schedule === 'monthly') next.setMonth(next.getMonth() + 1);
        await rem.ref.update({ nextDueDate: admin.firestore.Timestamp.fromDate(next) });
      }
    }
  });
```

**Expected result:** Pet owners receive daily push notifications for due reminders, and next due dates auto-advance.

## Complete code example

File: `FlutterFlow Pet Care App Setup`

```text
FIRESTORE DATA MODEL:
  pets/{petId}
    userId: String
    name: String
    species: String (dog / cat / bird / other)
    breed: String
    birthDate: Timestamp
    weight: double
    photoUrl: String
    └── medical_records/{recordId}
          type: String (vaccination / checkup / surgery / medication)
          title: String
          date: Timestamp
          vetName: String
          notes: String
          documentUrl: String
    └── reminders/{reminderId}
          title: String
          type: String (feeding / medication / vet_visit / grooming)
          recurringSchedule: String (daily / weekly / monthly)
          nextDueDate: Timestamp
          isActive: bool

PAGE: PetsPage
  Backend Query: pets where userId == currentUser
  Page State: selectedPetIndex (int)

  WIDGET TREE:
    Column
      ├── TabBar / Horizontal ScrollView (pet selector)
      │     └── Per pet: CircleImage (photo) + Text (name)
      ├── Pet Profile Card
      │     ├── CircleImage (photo, tap → upload new)
      │     ├── Text (name, species, breed)
      │     ├── Text (age: Custom Function from birthDate)
      │     └── Text (weight: "12.5 kg")
      ├── Section: Medical Records
      │     ├── Text ("Medical History")
      │     └── ListView (medical_records, orderBy date desc)
      │           └── Timeline item:
      │                 Row
      │                   ├── Column (vertical line + colored dot)
      │                   └── Column (date, title, vet, notes preview)
      ├── Section: Reminders
      │     ├── Text ("Reminders")
      │     └── ListView (reminders, where isActive, orderBy nextDueDate)
      │           └── Card (type icon + title + due date + schedule)
      │                 Amber if due today, Red if overdue
      └── FAB (+) → Add Record / Add Reminder bottom sheet

CUSTOM FUNCTION: calculatePetAge(birthDate)
  diff = now - birthDate
  years = diff.inDays ~/ 365
  months = (diff.inDays % 365) ~/ 30
  if years == 0: return "$months months"
  return "$years years $months months"
```

## Common mistakes

- **Calculating pet age as a simple year difference from birthDate** — A 6-month-old puppy displays as '0 years old' which is unhelpful and looks like a bug to the user. Fix: Use a Custom Function that returns 'X years Y months' for older pets and 'X months' for pets under one year.
- **Storing all medical records as fields on the pet document instead of a subcollection** — The pet document grows unbounded as records accumulate, hitting Firestore document size limits and making queries slow. Fix: Use a medical_records subcollection under each pet document for scalable, queryable storage.
- **Not updating nextDueDate after sending a reminder notification** — The same reminder triggers every day because nextDueDate never advances past the current date. Fix: After sending the notification, always update nextDueDate by adding the appropriate interval based on recurringSchedule.

## Best practices

- Use subcollections for medical records and reminders to keep pet documents lightweight
- Calculate pet age with a Custom Function that handles both months and years
- Color-code medical record types in the timeline for quick visual scanning
- Sort reminders by nextDueDate ascending so the most urgent items appear first
- Store medical document attachments in Firebase Storage with download URLs in Firestore
- Run reminder checks via a scheduled Cloud Function rather than client-side timers
- Support multiple pets per user with a clear tab-based or scroll-based selector

## Frequently asked questions

### Can I track weight history with a chart?

Yes. Add a weight_history subcollection with weight and date fields. Each time the owner updates weight, create a new entry. Display the history as a LineChart Custom Widget using the fl_chart package.

### How do I handle pets with unknown birth dates?

Make birthDate optional. When it is empty, display 'Age unknown' instead of calculating. Allow the owner to enter an estimated birth year instead of an exact date.

### Can I share a pet profile with a veterinarian?

Yes. Generate a read-only share link using a Cloud Function that creates a temporary access token. The vet can view the pet profile and medical records without needing an account.

### How do I attach PDF documents to medical records?

Use a FlutterFlowUploadButton configured for file upload. Upload the PDF to Firebase Storage and save the download URL in the documentUrl field. Display it with a Custom Widget PDF viewer or Launch URL to open externally.

### Can the app support exotic pets like reptiles or fish?

Yes. The species field is a String, so you can add any value. Consider adding species-specific reminder types like 'tank cleaning' for fish or 'heat lamp check' for reptiles as custom options.

### Can RapidDev help build a veterinary practice management system?

Yes. RapidDev can build complete vet practice platforms with patient records, appointment scheduling, billing, prescription management, and multi-clinic support.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-build-a-pet-care-management-app-with-reminders-and-medical-records-in-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-build-a-pet-care-management-app-with-reminders-and-medical-records-in-flutterflow