Build a workout planner where users create training plans, assign exercises to specific days of the week, and configure sets, reps, and rest time per exercise. An exercise library stored in Firestore lets users search by muscle group and add exercises to their plan. During workouts, a rest timer counts down between sets and users check off completed sets while logging actual weight and reps performed.
Building a Customizable Workout Planner in FlutterFlow
A workout planner schedules future training sessions, unlike a fitness tracker that logs completed workouts. This tutorial builds the planning side: users create named plans, assign exercises to days of the week from a searchable library, set target reps and weights, and execute workouts with a countdown rest timer between sets.
Prerequisites
- A FlutterFlow project with Firestore configured
- An exercises collection seeded with exercise data (name, muscle group, equipment)
- Understanding of Page State lists and ListView in FlutterFlow
- Basic familiarity with Timer actions in FlutterFlow
Step-by-step guide
Design the Firestore data model for plans and exercises
Design the Firestore data model for plans and exercises
Create a workout_plans collection with fields: userId (String), name (String), daysPerWeek (int), goal (String: strength, cardio, flexibility). Under each plan, create a scheduled_days subcollection with: dayOfWeek (String: Monday through Sunday), exercises (Array of Maps with exerciseId, name, sets, reps, restSeconds, targetWeight). Create an exercises collection with: name (String), muscleGroup (String: Chest, Back, Legs, Shoulders, Arms, Core, Cardio), equipment (String: Barbell, Dumbbell, Machine, Bodyweight), instructionUrl (String), imageUrl (String).
Expected result: Firestore has workout_plans with scheduled_days subcollection and a shared exercises library collection.
Build the plan creation and day selection interface
Build the plan creation and day selection interface
Create a CreatePlan page with TextFields for plan name, a DropDown for goal (strength, cardio, flexibility), and ChoiceChips for selecting active days (Monday through Sunday, multi-select). On Create, generate a workout_plans document and a scheduled_days document for each selected day with an empty exercises array. Navigate to the PlanDetail page showing a PageView or TabBar with one tab per active day.
Expected result: Users name their plan, select training days, and see a tabbed view with one tab per day ready for exercises.
Create a searchable exercise library with muscle group filter
Create a searchable exercise library with muscle group filter
Build an ExerciseLibrary page or BottomSheet. Add a search TextField that queries exercises where name starts with the search text using a Firestore prefix query. Add ChoiceChips for muscle group filtering (Chest, Back, Legs, Shoulders, Arms, Core, Cardio). Display results in a ListView showing: exercise image thumbnail, name, muscle group badge, and equipment label. On tap, the exercise is selected and passed back to the day editor. Load results on demand rather than pre-loading the entire library.
Expected result: Users search and filter the exercise library and tap to select exercises for their workout day.
Add exercises to a day with sets, reps, and rest configuration
Add exercises to a day with sets, reps, and rest configuration
When an exercise is selected from the library, show a configuration form: number input for sets (default 3), number input for reps (default 10), number input for rest seconds (default 60), and optional target weight. On Add, append the exercise to the current day's exercises array in Page State. Display the day's exercises in a ListView showing: exercise name, sets x reps, rest time, target weight, and a Remove button. Users can add multiple exercises per day. Save the entire array to the scheduled_days document when the user taps Save Day.
Expected result: Each day shows its exercise list with configurable sets, reps, rest, and weight targets.
Build the workout execution screen with rest timer
Build the workout execution screen with rest timer
Create a WorkoutExecution page that loads a specific day's exercises. Display each exercise in a ListView. Under each exercise, show individual set rows: set number, target reps, a TextField for actual weight entered during the workout, a TextField for actual reps, and a Checkbox to mark the set complete. When a set is checked complete, start a rest countdown timer using a Periodic Action that decrements a Page State restSeconds variable every second. Show the timer prominently with large text and a circular progress indicator. Auto-dismiss the timer when it reaches zero with an audio beep or vibration.
Expected result: Users execute workouts by checking off sets with actual weight and reps while a rest timer counts down between sets.
Save workout results and track plan adherence
Save workout results and track plan adherence
When the workout is complete, save the results to a workout_logs collection: userId, planId, dayOfWeek, exercises array with actual sets, reps, and weight per exercise, completedAt timestamp, totalDurationMinutes. On the plan overview page, show a weekly calendar view with green checkmarks for completed days and empty circles for upcoming days. Calculate plan adherence as completed workouts divided by planned days this week and display as a percentage.
Expected result: Completed workouts are logged and the plan overview shows weekly adherence with visual indicators.
Complete working example
1FIRESTORE DATA MODEL:2 exercises/{exerciseId}3 name: String4 muscleGroup: "Chest" | "Back" | "Legs" | "Shoulders" | "Arms" | "Core" | "Cardio"5 equipment: "Barbell" | "Dumbbell" | "Machine" | "Bodyweight"6 instructionUrl: String7 imageUrl: String89 workout_plans/{planId}10 userId: String11 name: String12 daysPerWeek: int13 goal: "strength" | "cardio" | "flexibility"14 └── scheduled_days/{dayId}15 dayOfWeek: "Monday" | "Tuesday" | ... | "Sunday"16 exercises: [17 {18 exerciseId: String,19 name: String,20 sets: 3,21 reps: 10,22 restSeconds: 60,23 targetWeight: 5024 }25 ]2627 workout_logs/{logId}28 userId: String29 planId: String30 dayOfWeek: String31 exercises: [{ name, actualSets, actualReps, actualWeight }]32 completedAt: Timestamp33 totalDurationMinutes: int3435WIDGET TREE — Plan Day Editor:36 Column37 ├── TabBar (Mon, Tue, Wed, ... per active day)38 └── TabBarView39 └── Per day:40 Column41 ├── ListView (exercises for this day)42 │ └── Container (card)43 │ Row44 │ ├── Image (exercise thumbnail)45 │ ├── Column46 │ │ ├── Text (exercise name, bold)47 │ │ └── Text (sets + 'x' + reps + ' | ' + rest + 's rest')48 │ └── IconButton (remove)49 ├── Button 'Add Exercise' → open ExerciseLibrary50 └── Button 'Save Day'5152WIDGET TREE — Workout Execution:53 Column54 ├── Text (day title, e.g. 'Monday: Chest & Triceps')55 ├── ListView (exercises)56 │ └── Column57 │ ├── Text (exercise name, Headline Small)58 │ └── Column (per set)59 │ Row60 │ ├── Text ('Set ' + setNumber)61 │ ├── TextField (weight, number keyboard)62 │ ├── TextField (reps, number keyboard)63 │ └── Checkbox (complete → start rest timer)64 └── Conditional Visibility (timer active)65 Container (centered, large)66 Column67 ├── CircularPercentIndicator (remaining / total)68 ├── Text (restSeconds, 48px font)69 └── Button 'Skip Rest'Common mistakes when building a Customizable Workout Planner in FlutterFlow
Why it's a problem: Pre-loading the entire exercise library into a DropDown
How to avoid: Use a search TextField with Firestore prefix query, loading only matching exercises on demand. Show at most 10 to 15 results at a time.
Why it's a problem: Storing exercises as separate subcollection documents per day instead of an embedded array
How to avoid: Embed the exercise configuration as an array field on the scheduled_days document for single-read access.
Why it's a problem: Not providing a rest timer between sets during workout execution
How to avoid: Start an automatic countdown timer when a set is completed. Show the remaining seconds prominently and allow skipping.
Best practices
- Search the exercise library on demand instead of pre-loading all exercises
- Embed exercise configs as an array on the day document for fast single-read loading
- Show a rest countdown timer automatically after each completed set
- Allow users to log actual weight and reps during workout for progress tracking
- Display weekly plan adherence to motivate consistency
- Use muscle group filters to help users build balanced training plans
- Store workout logs separately from plans so historical data persists even if the plan changes
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a workout planner in FlutterFlow with Firestore. Users create plans with exercises assigned to specific days. Each exercise has sets, reps, rest time, and target weight. An exercise library is searchable by muscle group. During workouts, users check off sets with actual weight/reps and a rest timer counts down. Show me the data model, plan editor widget tree, and workout execution screen.
Create a workout plan page with day tabs across the top, a list of exercise cards per day showing sets and reps, an Add Exercise button, and a Save button at the bottom.
Frequently asked questions
Can users reorder exercises within a day?
Yes. Use a Custom Widget with ReorderableListView for the exercise list on each day. On reorder, update the exercises array order in Page State and save to Firestore.
How do I add rest day support to plans?
Simply do not create a scheduled_days document for rest days. On the weekly view, days without a scheduled_days document display as Rest Day with a different color indicator.
Can I duplicate an existing workout plan?
Load the plan and all its scheduled_days documents. Create new documents with the same data but a new planId and the current user's userId. This is best handled in a Cloud Function for atomicity.
How do I track progressive overload over time?
Query workout_logs for a specific exercise across weeks. Display the weight and reps over time in a line chart Custom Widget using fl_chart to visualize progression.
Can I share workout plans with other users?
Add a shared_plan_templates collection. When a user publishes their plan, copy it to the templates collection. Other users browse templates and clone them to their own account.
Can RapidDev help build a fitness app with workout planning?
Yes. RapidDev can build complete fitness apps with workout planning, exercise libraries, progress tracking, rest timers, and social features like plan sharing.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation