How to Integrate Real-Time Sports Betting Features in FlutterFlow

Register at the-odds-api.com for a free API key (500 requests/month, enough for development). In Firestore, create a sports_events collection with fields: eventId (String), sport (String), homeTeam (String), awayTeam (String), commenceTime (Timestamp), status ('upcoming' | 'live' | 'completed'), homeScore (Integer), awayScore (Integer), lastUpdated (Timestamp). Create a sub-collection odds under each event document with fields: bookmaker (String), market ('h2h' for match winner), homeOdds (Double), awayOdds (Double), drawOdds (Double, nullable). Also create a sports_config document in Firestore at config/sports with a watchedSports array: ['americanfootball_nfl', 'basketball_nba', 'soccer_epl', 'baseball_mlb'].

Create a Firebase Cloud Function named fetchSportsOdds using the scheduler. Set schedule to 'every 15 minutes'. Store the Odds API key in Firebase Secret Manager. The function reads the watchedSports array from Firestore config/sports, then for each sport calls the Odds API endpoint: https://api.the-odds-api.com/v4/sports/{sport}/odds/?apiKey={KEY}&regions=us&markets=h2h&oddsFormat=decimal. Parse the response array of event objects. For each event, write to Firestore sports_events/{eventId} and write each bookmaker's odds to the odds sub-collection. Log the remaining API quota from the X-RateLimit-Requests-Remaining response header to monitor usage. Deploy the function and verify Firestore is populated after the first scheduled run.

1const { onSchedule } = require('firebase-functions/v2/scheduler');
2const { defineSecret } = require('firebase-functions/params');
3const admin = require('firebase-admin');
4const axios = require('axios');
5
6if (!admin.apps.length) admin.initializeApp();
7const oddsApiKey = defineSecret('ODDS_API_KEY');
8
9exports.fetchSportsOdds = onSchedule(
10  { schedule: 'every 15 minutes', secrets: [oddsApiKey] },
11  async () => {
12    const db = admin.firestore();
13    const config = await db.doc('config/sports').get();
14    const sports = config.data()?.watchedSports || ['americanfootball_nfl'];
15
16    for (const sport of sports) {
17      const url = `https://api.the-odds-api.com/v4/sports/${sport}/odds/` +
18        `?apiKey=${oddsApiKey.value()}&regions=us&markets=h2h&oddsFormat=decimal`;
19      const { data, headers } = await axios.get(url);
20      console.log(`Remaining quota: ${headers['x-ratelimit-requests-remaining']}`);
21
22      const batch = db.batch();
23      for (const event of data) {
24        const eventRef = db.collection('sports_events').doc(event.id);
25        batch.set(eventRef, {
26          eventId: event.id,
27          sport: event.sport_key,
28          homeTeam: event.home_team,
29          awayTeam: event.away_team,
30          commenceTime: admin.firestore.Timestamp.fromDate(new Date(event.commence_time)),
31          status: 'upcoming',
32          lastUpdated: admin.firestore.FieldValue.serverTimestamp(),
33        }, { merge: true });
34
35        for (const bm of event.bookmakers || []) {
36          const h2h = bm.markets?.find(m => m.key === 'h2h');
37          if (!h2h) continue;
38          const oddsRef = eventRef.collection('odds').doc(bm.key);
39          const outcomes = Object.fromEntries(h2h.outcomes.map(o => [o.name, o.price]));
40          batch.set(oddsRef, {
41            bookmaker: bm.title,
42            homeOdds: outcomes[event.home_team] || null,
43            awayOdds: outcomes[event.away_team] || null,
44            updatedAt: admin.firestore.FieldValue.serverTimestamp(),
45          });
46        }
47      }
48      await batch.commit();
49    }
50  }
51);

Create an EventsPage in FlutterFlow. Add ChoiceChips at the top bound to a Page State sportFilter variable: NFL / NBA / Premier League / MLB. Below, add a Backend Query (real-time) querying sports_events where sport equals sportFilter and status equals 'upcoming', ordered by commenceTime. Add a ListView bound to the query. Each item is a Container (Card style) with: a Row for team names (homeTeam vs awayTeam), a Row for odds from a nested Backend Query on the odds sub-collection filtered to one bookmaker (e.g., 'draftkings'). For each odds item, show a Column with team name and odds formatted based on a Page State oddsFormat variable ('decimal', 'american', 'fractional'). Use Custom Functions for format conversion. Add a Toggle at the top for odds format switching.

Create an App State variable betSlip (List<JSON>) where each item has: eventId, homeTeam, awayTeam, selection (team name), odds (Double), stake (Double). Add a bet slip icon in the top-right of the EventsPage showing the count of betSlip items as a badge. When the user taps an odds button, add an Action Flow: check if that eventId is already in betSlip → if yes, remove it (toggle off) → if no, add a new betSlip item with the selection and odds. Navigate to a BetSlipPage to review selections. On BetSlipPage: ListView of betSlip items, each with a TextField for stake amount. Create a Custom Function calculatePayout that takes stake and odds and returns stake * odds formatted as currency. Show total potential payout at the bottom by summing each selection's payout. Add a Place Bet button that (for display-only) shows a success dialog.

Create a second Cloud Function named updateLiveScores. Use a 1-minute schedule (Cloud Scheduler minimum — for 30-second updates, deploy two scheduled functions offset by 30 seconds, or use Cloud Tasks). The function calls the Odds API scores endpoint: https://api.the-odds-api.com/v4/sports/{sport}/scores/?apiKey={KEY}&daysFrom=1&dateFormat=iso. This endpoint returns scores for in-progress and recently completed games. For each score entry, update the corresponding Firestore sports_events document: set status to 'live' if in progress, update homeScore and awayScore fields, set status to 'completed' and final scores when completed. In FlutterFlow, the real-time Backend Query listener on the EventsPage updates score displays automatically as Firestore documents change.