How to Set Up a Pet Adoption Platform with User Profiles in FlutterFlow

Create three Firestore collections. First, pets with fields: shelterId (String, references shelter doc), name (String), species (String: Dog, Cat, Rabbit, Bird, Other), breed (String), age (String: Puppy/Kitten, Young, Adult, Senior), gender (String: Male, Female), size (String: Small, Medium, Large), description (String, 200-500 chars), photoUrls (Array of Strings, storage URLs), status (String: available, pending, adopted), medicalHistory (String), isSpayed (Boolean), location (String, city/state). Second, shelters with fields: name (String), address (String), phone (String), email (String), websiteUrl (String), logoUrl (String), adminUserIds (Array of Strings). Third, adoption_applications with fields: petId (String), petName (String, denormalized for display), applicantUserId (String), applicantName (String), status (String: pending, approved, rejected), housingType (String), hasYard (Boolean), hasPets (Boolean), experience (String), reason (String), submittedAt (Timestamp). Add sample data: 2 shelters with 8-10 pets across species, with 3-4 photos each uploaded to Firebase Storage. Set most pets to status available.

Create a page called BrowsePets. At the top, add a Column with three rows of ChoiceChips for filtering. First row: Species ChoiceChips with options All, Dog, Cat, Rabbit, Bird, bound to Page State variable selectedSpecies (String, default 'All'). Second row: Size ChoiceChips with All, Small, Medium, Large, bound to selectedSize. Third row: Age ChoiceChips with All, Puppy/Kitten, Young, Adult, Senior, bound to selectedAge. Below the filters, add a Backend Query that fetches from the pets collection where status equals 'available'. Apply additional where clauses conditionally: if selectedSpecies is not 'All', add where species equals selectedSpecies (and similarly for size and age). Order by name ascending. Display results in a GridView with crossAxisCount 2 and spacing 12. Each grid child is a Container with rounded corners and a Column: an Image widget (first item from photoUrls array, height 150, fit cover, borderRadius top 12), a Padding with a Column containing name in titleSmall bold, breed in bodySmall, and a Row with age and size in caption style with secondary color. Important: the default query MUST filter status equals 'available' so adopted pets never appear in browse results.

Create a page called PetDetail with a Page Parameter petDocRef (DocumentReference to the pets collection). Add a Backend Query for the pet document using petDocRef. At the top, add a PageView widget bound to the photoUrls array, with height 300 and borderRadius 0. Enable autoplay false and show dots indicator below. Below the gallery, add a Padding (16px) wrapping a Column. First child: a Row with the pet name in headlineSmall bold and an IconButton (heart icon) for favoriting. On tap, toggle the pet in the user's favorites list (a subcollection under the user document or an array field). Use Conditional Styles: filled red heart if already favorited, outlined grey if not. Second child: a Row of Chip widgets showing species, breed, age, size, and gender — each in a Container with rounded corners and a light background. Third child: a Divider, then the description Text in bodyMedium. Fourth child: a section for medical info — isSpayed shown as a Chip (Spayed/Neutered or Not Yet), and medicalHistory text. Fifth child: query the shelters collection using the pet's shelterId to display shelter name, address, phone, and a 'Visit Website' button (Launch URL). At the bottom, add a prominent ElevatedButton 'Apply to Adopt' that navigates to the AdoptionApplication page, passing petDocRef and petName as parameters. Hide this button if the pet status is not 'available'.

Create a page called AdoptionApplication with Page Parameters petDocRef (DocumentReference) and petName (String). Display the petName at the top so applicants know which pet they are applying for. Build a form Column with the following fields: a TextField for full name (validate non-empty), a DropDown for housing type (House, Apartment, Condo, Townhouse, Other), a ToggleButton or SwitchListTile for 'Do you have a yard?', a ToggleButton for 'Do you currently have other pets?', a TextField (multiline, maxLines 4) for 'Describe your experience with pets', and a TextField (multiline, maxLines 4) for 'Why do you want to adopt this pet?'. Add a Form Validation action on the Submit button's On Tap: check that name, experience, and reason are non-empty and at least 20 characters. On validation pass, create a document in adoption_applications with all form values, the petId from petDocRef, petName, applicantUserId from currentUserUid, applicantName from the name field, status set to 'pending', and submittedAt set to server timestamp. Also update the pet document's status to 'pending'. Show a SnackBar confirming submission and navigate back to BrowsePets.

Create a page called ShelterAdmin. On Page Load, query the shelters collection where adminUserIds array contains currentUserUid. If no result, show an 'Access Denied' message and a back button. If authorized, display the shelter name in the AppBar. Add a TabBar with two tabs: Pets and Applications. The Pets tab shows a ListView of all pets for this shelter (query pets where shelterId equals the shelter doc ID). Each list item shows the pet photo, name, status with a color-coded Chip (green for available, amber for pending, grey for adopted), and an Edit IconButton that navigates to a PetEditPage for updating pet details. Add a FloatingActionButton on this tab to add a new pet listing. The Applications tab queries adoption_applications where petId is in the shelter's pet IDs and status equals 'pending'. Each application shows the petName, applicantName, submittedAt, and two action buttons: Approve (green) and Reject (red). Approve action: update the application status to 'approved', update the pet status to 'adopted', and reject all other pending applications for the same pet. Reject action: update the application status to 'rejected' and set the pet status back to 'available' if no other pending applications exist.

Create a page called UserProfile. At the top, display the current user's name and email from the Firebase Auth profile. Add a profile photo using a CircleImage bound to the user's photoURL, with an Edit IconButton that triggers the FlutterFlow image upload flow to update the photo. Below the profile header, add a TabBar with two tabs: Favorites and My Applications. The Favorites tab queries a user_favorites subcollection under the current user document (each doc has petId and addedAt). For each favorite, run a secondary query to fetch the pet document and display it as a compact card with photo, name, breed, and status. If status is 'adopted', show a greyed-out card with an 'Adopted' overlay. Add a remove button (X icon) that deletes the favorite document. The My Applications tab queries adoption_applications where applicantUserId equals currentUserUid, ordered by submittedAt descending. Each item shows petName, submittedAt formatted date, and a status Chip (amber for pending, green for approved, red for rejected). Tapping an application navigates to the PetDetail page for that pet.