How to Integrate External Health Monitoring Devices in FlutterFlow

In FlutterFlow, go to Custom Code → Custom Widgets → Add Widget. Name it BLEDeviceScanner. Add the pubspec dependency flutter_blue_plus: ^1.30.0. The widget scans for nearby BLE devices, filters by the target service UUID, and displays a list of discovered devices. Initialize FlutterBluePlus and call FlutterBluePlus.startScan(withServices: [Guid('0000180D-0000-1000-8000-00805F9B34FB')]) to scan only for heart rate devices — the long form of the service UUID 0x180D. Listen to FlutterBluePlus.scanResults and update a local state list of devices (name + RSSI signal strength). Add a Connect button next to each device. On connect tap: await device.connect(autoConnect: false). After connection, discover services with device.discoverServices(). Find the Heart Rate Measurement characteristic (UUID 0x2A37) and call characteristic.setNotifyValue(true). Listen to characteristic.onValueReceived to get real-time heart rate data bytes.

1// BLEDeviceScanner - simplified connection + data reading
2import 'package:flutter_blue_plus/flutter_blue_plus.dart';
3
4// Heart Rate service UUID and characteristic UUID
5const HEART_RATE_SERVICE = '0000180d-0000-1000-8000-00805f9b34fb';
6const HEART_RATE_MEASUREMENT = '00002a37-0000-1000-8000-00805f9b34fb';
7
8Future<void> connectAndReadHeartRate(BluetoothDevice device,
9    Function(int heartRate) onReading) async {
10  await device.connect(autoConnect: false, timeout: Duration(seconds: 15));
11  
12  final services = await device.discoverServices();
13  final hrService = services.firstWhere(
14    (s) => s.serviceUuid.toString() == HEART_RATE_SERVICE
15  );
16  
17  final hrChar = hrService.characteristics.firstWhere(
18    (c) => c.characteristicUuid.toString() == HEART_RATE_MEASUREMENT
19  );
20  
21  await hrChar.setNotifyValue(true);
22  hrChar.onValueReceived.listen((bytes) {
23    final heartRate = parseHeartRate(bytes);
24    onReading(heartRate);
25  });
26}
27
28int parseHeartRate(List<int> bytes) {
29  // GATT Heart Rate Measurement format:
30  // Byte 0: flags. Bit 0 = 0 means HR value is UINT8, = 1 means UINT16
31  final isUint16 = (bytes[0] & 0x01) != 0;
32  return isUint16 ? (bytes[2] << 8) + bytes[1] : bytes[1];
33}

Blood pressure monitors use GATT service UUID 0x1810 (Blood Pressure) and characteristic UUID 0x2A35 (Blood Pressure Measurement). Unlike heart rate which sends continuous notifications, blood pressure sends a single reading after measurement. Set characteristic.setNotifyValue(true) and wait for the onValueReceived event which fires once when the user completes a measurement on the device. Parse the bytes: Byte 0 is the flags byte. Bytes 1-2 are systolic pressure as a SFLOAT (IEEE-11073 16-bit float). Bytes 3-4 are diastolic. Bytes 5-6 are mean arterial pressure. If flag bit 2 is set, bytes 7-8 contain pulse rate. Create a Custom Function parseBPReading(List<int> bytes) that decodes the SFLOAT values: the SFLOAT format uses the upper 4 bits as a signed exponent and lower 12 bits as a mantissa. Return a Map with systolic, diastolic, and pulseRate values.

After receiving and parsing a health reading in the Custom Widget callback, call a FlutterFlow Action from the Custom Widget using the widget's action callback parameter. The action: (1) creates a Firestore document in health_readings/{userId}/readings with fields: deviceType (String, 'heart_rate' or 'blood_pressure'), value (Map: {heartRate: 75} or {systolic: 120, diastolic: 80}), unit (String, 'bpm' or 'mmHg'), timestamp (Timestamp). Create a HealthDashboard page with a Backend Query on health_readings/{userId}/readings ordered by timestamp descending, limit 100. Display the latest reading prominently (large text widget). Add a Custom Widget using fl_chart LineChart or BarChart for historical trend visualization — bind to the readings list from the Backend Query. Add a 'Connect Device' button that opens a bottom sheet containing the BLEDeviceScanner Custom Widget.

BLE devices disconnect when: the device goes out of range, the device turns off automatically after a session, the OS kills the BLE connection to save battery, or the measurement is complete (for single-reading devices). In the Custom Widget, listen to device.connectionState stream. When the state changes to BluetoothConnectionState.disconnected: update a local variable connectionStatus to 'Disconnected' and show a red indicator in the UI. Implement auto-reconnect: if autoReconnect app state is true, wait 3 seconds and call connectAndReadHeartRate again. Show a 'Reconnecting...' indicator with a CircularProgressIndicator during the attempt. After 3 failed reconnect attempts, stop retrying and show a Toast: 'Device disconnected. Tap Connect to reconnect.' Display connection status prominently in the UI — a green dot for connected, yellow for reconnecting, red for disconnected.