How to Create a Smart Home Device Management App in FlutterFlow

Open your Firebase console and create two Firestore collections. The first, named 'rooms', stores documents with fields: name (String), icon (String), and order (Integer). The second, named 'devices', stores documents with fields: room_id (String), name (String), type (String — light/thermostat/sensor), state (Map — contains on: Boolean, brightness: Integer, temperature: Double), last_updated (Timestamp), and platform_device_id (String). Back in FlutterFlow, open the Firestore panel, click 'Get Schema from Firestore', and import both collections. This gives your app strongly-typed references to use in Backend Queries throughout the UI.

In your Firebase project, create a Cloud Function named 'smartHomeProxy'. This function accepts a POST body with device_id, command (get_state or set_state), and payload. It reads API credentials from Firebase environment config (never hardcode them), calls the manufacturer REST API, and writes the updated state back to the corresponding Firestore device document. Deploy the function using the Firebase CLI. In FlutterFlow, open the API Calls panel, click '+', choose 'Cloud Function', paste the function URL, add a header of Content-Type: application/json, and set the body schema to match the fields above. Save as 'SmartHomeProxy'.

1// functions/index.js (Firebase Cloud Function)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5admin.initializeApp();
6
7exports.smartHomeProxy = functions.https.onCall(async (data, context) => {
8  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Must be signed in');
9  const { device_id, command, payload } = data;
10  const apiKey = functions.config().smarthome.api_key;
11  const baseUrl = functions.config().smarthome.base_url;
12
13  let result;
14  if (command === 'get_state') {
15    const res = await axios.get(`${baseUrl}/devices/${device_id}/state`, {
16      headers: { Authorization: `Bearer ${apiKey}` }
17    });
18    result = res.data;
19  } else if (command === 'set_state') {
20    const res = await axios.post(`${baseUrl}/devices/${device_id}/commands`, payload, {
21      headers: { Authorization: `Bearer ${apiKey}`, 'Content-Type': 'application/json' }
22    });
23    result = res.data;
24  }
25
26  await admin.firestore().doc(`devices/${device_id}`).update({
27    state: result.state,
28    last_updated: admin.firestore.FieldValue.serverTimestamp()
29  });
30  return { success: true, state: result.state };
31});

On your home page in FlutterFlow, drag a Column widget to fill the screen. Inside it, add a TabBar widget. In the TabBar properties, set 'Dynamic Tabs' to true and bind the Tab Labels to a Backend Query on the 'rooms' collection ordered by the 'order' field. Each tab's label binds to the room name field. Below the TabBar, add a TabBarView that matches. Inside each view, place a GridView widget (2 columns, spacing 12). The GridView's data source is a Backend Query on the 'devices' collection filtered by room_id equal to the current tab's room document ID. This ensures each tab shows only its room's devices.

Create a reusable Component called 'DeviceCard'. Inside it, add a Container with rounded corners (radius 16) and a soft shadow. Place an Icon (bound to the device type field — use a conditional to pick a lightbulb, thermostat, or sensor icon), a Text widget for the device name, and a Row at the bottom with a Toggle widget (bound to state.on) and a Slider widget (visible only when type equals 'light', bound to state.brightness, range 0-100). On the Toggle's On Changed action, add a Custom Action that calls the 'SmartHomeProxy' API Call with command: set_state and payload: { on: the new toggle value }. On the Slider's On Change End action, do the same with payload: { brightness: the slider value }.

On your home page's initState, add an Action Flow that starts a Periodic Timer set to 30,000 milliseconds. Inside the timer callback, add a Backend Query Refresh action targeting both the rooms and devices queries. This re-fetches all device states from Firestore, which was updated by a separate scheduled Cloud Function that polls the manufacturer API every 60 seconds. To avoid stale displays, also add a manual refresh: place a RefreshIndicator widget wrapping the TabBarView so users can pull-to-refresh at any time. Disable the timer in the page's dispose action by storing the timer reference in Page State and calling timer.cancel().

Create a Bottom Sheet page called 'DeviceDetailSheet' with a Page Parameter called 'device' of type DeviceDocument. On a device card tap action, navigate to this bottom sheet passing the tapped device. Inside the sheet, show all device properties: name, room, last_updated (formatted as 'Updated X minutes ago'), current state values, and a full set of controls. For thermostats, add a large dial using a CircularSlider or two increment/decrement buttons for temperature. For sensors, show the last reading value in a large Text widget with units. Add a 'Rename Device' TextField that calls a Firestore update action on blur.