How to Integrate Environmental Sensors Data into a FlutterFlow App

Deploy a Cloud Function named getAirQuality. It accepts a city parameter and calls the AirVisual API: GET https://api.airvisual.com/v2/city?city={city}&state={state}&country={country}&key={API_KEY}. The response includes weather (temperature, humidity, wind) and pollution (aqiUS, aqiCN, p2 PM2.5, p1 PM10, o3 ozone, n2 NO2) objects. Store the API key in Cloud Function environment variables as AIRVISUAL_API_KEY. After fetching the current reading, write it to Firestore: air_quality_readings/{city.toLowerCase()} with: aqiUS (Integer), aqiCategory (String), p2 (Double, PM2.5), temperature (Double), humidity (Integer), fetchedAt (Timestamp). Return the same data to FlutterFlow. Register this Cloud Function in FlutterFlow's API Manager as an API Group with base URL https://us-central1-{projectId}.cloudfunctions.net and a getAirQuality API Call (POST, /getAirQuality, body: {"data": {"city": [city], "state": [state], "country": [country]}}).

1// Cloud Function: getAirQuality
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const fetch = require('node-fetch');
5
6exports.getAirQuality = functions.https.onCall(async (data, context) => {
7  const { city, state, country } = data;
8  const apiKey = process.env.AIRVISUAL_API_KEY;
9  
10  const url = `https://api.airvisual.com/v2/city?city=${encodeURIComponent(city)}` +
11    `&state=${encodeURIComponent(state)}&country=${encodeURIComponent(country)}&key=${apiKey}`;
12  
13  const response = await fetch(url);
14  const json = await response.json();
15  
16  if (json.status !== 'success') {
17    throw new functions.https.HttpsError('not-found', `City not found: ${city}`);
18  }
19  
20  const pollution = json.data.current.pollution;
21  const weather = json.data.current.weather;
22  
23  const aqiUS = pollution.aqius;
24  const aqiCategory = getAQICategory(aqiUS);
25  
26  const reading = {
27    city,
28    aqiUS,
29    aqiCategory,
30    pm25: pollution.p2?.conc || null,
31    temperature: weather.tp,
32    humidity: weather.hu,
33    windSpeed: weather.ws,
34    fetchedAt: admin.firestore.FieldValue.serverTimestamp()
35  };
36  
37  // Cache in Firestore
38  await admin.firestore().collection('air_quality_readings')
39    .doc(city.toLowerCase().replace(/ /g, '_'))
40    .set(reading, { merge: true });
41  
42  return reading;
43});
44
45function getAQICategory(aqi) {
46  if (aqi <= 50) return 'Good';
47  if (aqi <= 100) return 'Moderate';
48  if (aqi <= 150) return 'Unhealthy for Sensitive Groups';
49  if (aqi <= 200) return 'Unhealthy';
50  if (aqi <= 300) return 'Very Unhealthy';
51  return 'Hazardous';
52}

Add the percent_indicator Flutter package to your FlutterFlow project (Custom Code → Pubspec Dependencies: percent_indicator: ^4.2.3). Create a Custom Widget named AQIGauge. The widget takes: aqiValue (Integer, 0-500), aqiCategory (String). It renders a CircularPercentIndicator with: percent = aqiValue / 500 (normalized to 0.0-1.0), radius = 80, lineWidth = 15, center: Column with aqiValue as large bold text and aqiCategory as small text below. The progressColor and backgroundColor change based on the AQI range: Green (#4CAF50) for 0-50, Yellow (#FFEB3B) for 51-100, Orange (#FF9800) for 101-150, Red (#F44336) for 151-200, Purple (#9C27B0) for 201-300, Maroon (#7D1B1B) for 301-500. Add the AQIGauge widget to your dashboard page and pass in the aqiUS and aqiCategory values from the Backend Query bound to the Firestore air_quality_readings document.

For historical trends: add a Firestore subcollection air_quality_readings/{city}/hourly_history with documents written every hour by a scheduled Cloud Function (Cloud Scheduler triggers the getAirQuality function for configured cities hourly). On the dashboard page, add a Backend Query for the hourly_history subcollection ordered by fetchedAt descending, limit 24. Add a Custom Widget using fl_chart LineChart: x-axis shows the last 24 hours, y-axis shows AQI values 0-500 with horizontal threshold lines at 50, 100, 150, 200 (the category boundaries). Plot the AQI values as a line. Color the area under the line using the gradient matching the AQI scale. For the map: add a FlutterFlowGoogleMap widget with marker pins for each monitored city. Use a Custom Function to map aqiUS to a marker color matching the AQI scale — green pins for Good, yellow for Moderate, orange for Unhealthy for Sensitive Groups, red for Unhealthy. Tap a marker to show a popup with that city's current AQI and category.

For custom environmental sensors (DIY weather stations, industrial air quality monitors, smart agriculture sensors) that send their own data: Option 1 — HTTP POST webhook: configure the sensor or its gateway to POST readings to a Cloud Function URL. The Cloud Function validates the sensor's API key (stored in Firestore sensor_registry/{sensorId}), parses the payload (metric, value, unit, lat, lng), and writes to Firestore sensor_readings/{sensorId}/readings. Option 2 — MQTT: deploy an MQTT broker (AWS IoT Core, HiveMQ) and configure the sensor to publish to topics like sensors/{sensorId}/readings. A Cloud Function subscribes to the MQTT topic or a PubSub topic connected to AWS IoT and writes readings to Firestore. In FlutterFlow, use a real-time Backend Query on sensor_readings/{sensorId}/readings ordered by timestamp to show live sensor data as it arrives.