How to Create a Crowd-Sourced Weather Reporting App in FlutterFlow

Create a weather_reports collection with fields: userId (String), lat (double), lng (double), geoHash (String, computed from lat/lng), condition (String: sunny, cloudy, rainy, snowy, stormy), temperature (double, optional, user-estimated or from device sensor), description (String, optional freeform note), photoUrl (String, optional), timestamp (Timestamp). The geoHash field is critical: it encodes latitude and longitude into a single sortable string that enables proximity queries. Use a Custom Function or Cloud Function to compute geoHash at precision 5, which gives roughly 2.4km accuracy.

1// Custom Function: computeGeoHash
2String computeGeoHash(double lat, double lng, {int precision = 5}) {
3  const base32 = '0123456789bcdefghjkmnpqrstuvwxyz';
4  double minLat = -90, maxLat = 90;
5  double minLng = -180, maxLng = 180;
6  bool isLng = true;
7  int bit = 0;
8  int hashValue = 0;
9  String hash = '';
10
11  while (hash.length < precision) {
12    double mid = isLng
13        ? (minLng + maxLng) / 2
14        : (minLat + maxLat) / 2;
15    double val = isLng ? lng : lat;
16    if (val >= mid) {
17      hashValue = (hashValue << 1) + 1;
18      if (isLng) minLng = mid; else minLat = mid;
19    } else {
20      hashValue = hashValue << 1;
21      if (isLng) maxLng = mid; else maxLat = mid;
22    }
23    isLng = !isLng;
24    bit++;
25    if (bit == 5) {
26      hash += base32[hashValue];
27      bit = 0;
28      hashValue = 0;
29    }
30  }
31  return hash;
32}

Create a SubmitReport page. On page load, trigger a Custom Action using the geolocator package to get the current GPS coordinates and store them in Page State variables currentLat and currentLng. Display a GridView of weather condition icons: sun for sunny (yellow), cloud for cloudy (grey), rain drops for rainy (blue), snowflake for snowy (light blue), lightning for stormy (red). Users tap one to select. Add an optional temperature TextField (number keyboard), an optional description TextField, and an optional FlutterFlowUploadButton for a photo. On Submit, compute the geoHash from lat/lng, create the weather_reports document, and show a success SnackBar.

Create a MapView page with a FlutterFlowGoogleMap widget. Query weather_reports from the last 4 hours to keep data fresh. For each report, create a map marker with position set to lat/lng and color based on condition: yellow for sunny, grey for cloudy, blue for rainy, light blue for snowy, red for stormy. The marker info window shows the condition, temperature if present, time ago, and a thumbnail of the photo if uploaded. On map load, center on the user's current location. Users can zoom out to see regional patterns.

Create a FeedView page showing recent reports near the user. Get the user's current geoHash at precision 4 (wider area, approximately 20km). Query weather_reports where geoHash starts with this 4-character prefix using Firestore range query: geoHash >= prefix AND geoHash < prefix + next character. This returns all reports in the surrounding area. Display in a ListView ordered by timestamp descending, each row showing: condition icon, temperature, description excerpt, time ago, distance from user (calculated with Haversine formula Custom Function), and photo thumbnail if present.

Create a scheduled Cloud Function that runs every hour. It queries all weather_reports from the last hour, groups them by geoHash prefix at precision 3 (approximately 78km areas), and for each area calculates: most common condition (mode), average temperature, and report count. Store these aggregates in a weather_aggregates collection: geoHash3 (String), avgTemperature (double), dominantCondition (String), reportCount (int), aggregatedAt (Timestamp). Display these on the map as larger area summary markers when the user is zoomed out.

Add an optional official weather comparison. Create an API Group call to OpenWeatherMap using the user's coordinates. Display the official temperature and condition alongside community data in a comparison card: Official says 22 degrees and Sunny, Community reports 24 degrees and Partly Cloudy (from 12 reports). This gives users both official forecasts and real-time ground truth from the community. Show the comparison only when sufficient community reports exist in the area (at least 3 reports in the last 2 hours).