How to Integrate Wearable Tech Data into a FlutterFlow Health App

In FlutterFlow, go to Custom Code → Pubspec Dependencies. Add health (version ^10.2.0). Click Save and wait for compile. For iOS, go to Settings → iOS Settings → Info.plist Custom Values. Add NSHealthShareUsageDescription with value 'This app reads your health data to track your daily wellness metrics'. Add NSHealthUpdateUsageDescription with value 'This app may save workout data to your Health app'. For Android, go to Settings → Android Settings → Manifest. Add the ACTIVITY_RECOGNITION permission and the HEALTH_READ permission. Also add the health_connect activity declaration to AndroidManifest.xml (check the health package pub.dev page for the exact XML snippet for your version).

In FlutterFlow, create a HealthPermissionsExplainer page. Add a Column with: a health/heart icon, a heading 'Connect Your Health Data', a body text explaining exactly what data will be accessed ('We will read your daily steps, heart rate, and sleep data to show you personalized wellness insights'), and a green Connect button. Add a 'No thanks' text button. On the Connect button tap: call a Custom Action requestHealthPermissions. In the Custom Action, create a Health instance and call Health.requestAuthorization with the list of HealthDataType values you need. After authorization, navigate to the main health dashboard page. On 'No thanks', navigate to the dashboard without health data (show placeholder empty state). Navigate to this explainer page on first app launch when health permissions have not been requested yet (check a hasSeenHealthExplainer boolean in SharedPreferences).

Create a Custom Action named fetchHealthData that takes a String parameter dateRange ('today', '7days', '30days'). Compute startDate as midnight of the start date (DateTime.now().subtract(Duration(days: 7)).startOf('day')) and endDate as now. Call Health.getHealthDataFromTypes(startDate, endDate, [HealthDataType.STEPS, HealthDataType.HEART_RATE, HealthDataType.SLEEP_ASLEEP, HealthDataType.WORKOUT]). The method returns a list of HealthDataPoint objects. Aggregate steps by summing all STEPS data points for the day, calculate average heart rate from HEART_RATE points, calculate total sleep hours from SLEEP_ASLEEP points (sum durations and convert to hours), and count workouts. Return the aggregated values as a JSON object. Store the JSON in App State healthData for the dashboard to display.

1import 'package:health/health.dart';
2
3Future<Map<String, dynamic>> fetchHealthData(String dateRange) async {
4  final health = Health();
5  final now = DateTime.now();
6  final days = dateRange == '30days' ? 30 : dateRange == '7days' ? 7 : 1;
7  final startDate = DateTime(now.year, now.month, now.day)
8      .subtract(Duration(days: days - 1));
9
10  final types = [
11    HealthDataType.STEPS,
12    HealthDataType.HEART_RATE,
13    HealthDataType.SLEEP_ASLEEP,
14    HealthDataType.WORKOUT,
15  ];
16
17  bool authorized = await health.requestAuthorization(types);
18  if (!authorized) return {'error': 'Not authorized'};
19
20  final dataPoints = await health.getHealthDataFromTypes(
21    startTime: startDate,
22    endTime: now,
23    types: types,
24  );
25
26  int totalSteps = 0;
27  List<double> heartRates = [];
28  double sleepHours = 0;
29  int workouts = 0;
30
31  for (final point in dataPoints) {
32    final value = (point.value as NumericHealthValue).numericValue;
33    switch (point.type) {
34      case HealthDataType.STEPS:
35        totalSteps += value.toInt();
36        break;
37      case HealthDataType.HEART_RATE:
38        heartRates.add(value.toDouble());
39        break;
40      case HealthDataType.SLEEP_ASLEEP:
41        sleepHours += point.dateTo.difference(point.dateFrom).inMinutes / 60;
42        break;
43      case HealthDataType.WORKOUT:
44        workouts++;
45        break;
46      default:
47        break;
48    }
49  }
50
51  return {
52    'steps': totalSteps,
53    'avgHeartRate': heartRates.isEmpty ? 0 :
54        (heartRates.reduce((a, b) => a + b) / heartRates.length).round(),
55    'sleepHours': double.parse(sleepHours.toStringAsFixed(1)),
56    'workouts': workouts,
57    'fetchedAt': now.toIso8601String(),
58  };
59}

Create a HealthDashboard page. In the page's On Page Load action, call the fetchHealthData Custom Action with '7days' and store the result in App State variable healthData (JSON type). Add a Row of four Container KPI cards: Steps (show healthData.steps), Heart Rate (show healthData.avgHeartRate with 'bpm'), Sleep (show healthData.sleepHours with 'hrs'), Workouts (show healthData.workouts). Each card uses a Column with a large bold number on top and a label below. For color coding: if steps > 10000 show green icon, else orange. If sleepHours > 7 show green, else orange. Add ChoiceChips below for Today / 7 Days / 30 Days date range selection — on chip change, call fetchHealthData with the new range. Add a CircularProgressIndicator while the action is loading by checking an isLoading Page State boolean.

Modify the fetchHealthData Custom Action to also write the aggregated health metrics to Firestore after fetching. Create a Firestore collection health_data with documents keyed by userId + date (e.g., userId_2026-03-29). Write: userId, date, steps, avgHeartRate, sleepHours, workouts, source ('apple_health' or 'google_fit' based on Platform.isIOS), syncedAt. This creates a historical record of daily health metrics that persists across devices and enables analytics (weekly trends, streaks, goals). For trend charts: query health_data where userId == current user ordered by date, last 30 records. Plot steps as a bar chart using a Custom Widget with fl_chart. This data syncing should happen in the background on app open, not blocking the UI.