How to Develop a Fitness Tracking App Using FlutterFlow

Create a workouts collection with fields: userId (String), exercises (List of Maps — each with name String, sets Integer, reps Integer, weight Double), durationMinutes (Integer), caloriesBurned (Integer), timestamp (Timestamp), and notes (String). Create a goals collection with fields: userId (String), type (String — calories, workouts, or streakDays), targetValue (Integer), currentValue (Integer), period (String — weekly or monthly), and startDate (Timestamp). Set Firestore rules so users can only read and write their own documents. Add 3-4 test workouts with varied dates for chart testing.

Create a LogWorkoutPage. Add a Page State variable exerciseList of type List of JSON (initially empty). Place a Column with: a Text header 'Log Workout', a ListView bound to exerciseList where each row has four fields — TextField for exercise name, TextField (numeric) for sets, TextField (numeric) for reps, and a Slider for weight (0-300 lbs). Each row also has an IconButton (Icons.remove_circle) that removes that entry from exerciseList. Below the ListView, add an ElevatedButton 'Add Exercise' that appends a new empty JSON object {name: '', sets: 0, reps: 0, weight: 0} to exerciseList. At the bottom, add a TextField for durationMinutes and a Save Workout button whose Action Flow creates a Firestore document in workouts with all the exerciseList entries, the calculated caloriesBurned from your Custom Function, and the current timestamp.

Build a DashboardPage. At the top, add a Row of three Container KPI cards. Card 1: 'Workouts This Week' — Backend Query counting workouts where userId == currentUser AND timestamp >= startOfWeek. Card 2: 'Calories Burned' — Custom Function summing caloriesBurned from the same weekly query results. Card 3: 'Current Streak' — Custom Function that queries workouts ordered by timestamp desc, iterates backwards checking for consecutive days with at least one workout, and returns the streak count. Style each card with the value in headlineMedium bold and the label in bodySmall secondary color. Add a flame icon next to the streak count for visual emphasis.

Create a Custom Widget named WeeklyBarChart that imports the fl_chart package. The widget accepts a parameter weeklyData (List of JSON with day String and value Integer). Inside the widget, build a BarChart with 7 bars (Mon-Sun), each bar's height set to the calories or workout count for that day. Style bars with rounded tops and a gradient from primary color to primaryLight. Add axis labels for days of the week along the bottom. On the DashboardPage, query workouts for the current week, group by day using a Custom Function, and pass the grouped data to the WeeklyBarChart widget. Place it in a Container with 200px height below the KPI cards.

1// Custom Widget: WeeklyBarChart (simplified)
2import 'package:fl_chart/fl_chart.dart';
3
4BarChart(
5  BarChartData(
6    barGroups: List.generate(7, (i) {
7      final value = widget.weeklyData.length > i
8          ? (widget.weeklyData[i]['value'] as num).toDouble()
9          : 0.0;
10      return BarChartGroupData(x: i, barRods: [
11        BarChartRodData(
12          toY: value,
13          width: 20,
14          borderRadius: BorderRadius.vertical(top: Radius.circular(6)),
15          gradient: LinearGradient(
16            colors: [Color(0xFF4CAF50), Color(0xFF81C784)],
17            begin: Alignment.bottomCenter, end: Alignment.topCenter,
18          ),
19        ),
20      ]);
21    }),
22    titlesData: FlTitlesData(
23      bottomTitles: AxisTitles(sideTitles: SideTitles(
24        showTitles: true,
25        getTitlesWidget: (value, meta) => Text(
26          ['M','T','W','T','F','S','S'][value.toInt()],
27        ),
28      )),
29    ),
30  ),
31)

Below the chart, add a goal progress section. Query the user's active goal document from the goals collection. Use the CircularPercentIndicator widget (add the percent_indicator package in pubspec dependencies) with percent set to currentValue / targetValue (capped at 1.0). Set the lineWidth to 12, progressColor to green, backgroundColor to grey[200], and place a Text widget in the center showing 'currentValue / targetValue'. Below the indicator, show the goal type label (e.g., 'Weekly Calories Goal'). Add an Edit Goal button that opens a BottomSheet with a TextField for targetValue and a DropDown for goal type. On save, update the goal document. A Cloud Function triggered on workout creation should increment the matching goal's currentValue and reset goals weekly.

Create a HistoryPage (or a tab on the dashboard) with a ListView bound to a Backend Query on workouts where userId == currentUser.uid ordered by timestamp desc, limit 20 with infinite scroll. Each list item Container shows: date (formatted timestamp), workout summary (e.g., '4 exercises, 45 min'), calories burned with a flame icon, and a right chevron. On Tap, navigate to a WorkoutDetailPage that receives the workout document reference and displays all exercises in a DataTable-style layout with columns for Exercise Name, Sets, Reps, and Weight. Add a Delete Workout IconButton in the AppBar with a confirmation dialog.