How to Integrate a Live Sports Ticker into a FlutterFlow App

TheSportsDB (thesportsdb.com/api.php) is completely free and requires no API key for basic data — ideal for getting started. SportsData.io provides more comprehensive data including play-by-play and real-time scores but requires paid API access. The ESPN API has no official developer documentation but has well-known unofficial endpoints (site.api.espn.com/apis/site/v2/sports/{sport}/{league}/scoreboard) that are widely used for non-commercial projects. For this tutorial, we use SportsData.io's NFL endpoint as a concrete example. Key endpoints: GET /v3/nfl/scores/{season}/ScoresByWeek/{week} returns current-week scores with homeScore, awayScore, quarter, timeRemaining, status (Scheduled/InProgress/Final). Plan your Firestore structure to match this data.

Create a sports_scores Firestore collection. Each document represents one game with fields: gameId (String), sport (String), league (String), homeTeam (String), awayTeam (String), homeScore (Integer), awayScore (Integer), status (String — Scheduled/InProgress/Final), quarter (String), timeRemaining (String), startTime (Timestamp), venue (String), lastUpdated (Timestamp). Create a ticker_config document in a settings collection that controls which sports are displayed and what polling interval to use. Create a play_by_play subcollection under each game document with events: description, team, quarter, timeRemaining, recordedAt. This subcollection allows the game detail page to show a running play list.

Create a Cloud Function triggered by Cloud Scheduler named updateSportsScores. In Cloud Functions → Triggers → Cloud Scheduler, set the schedule to every 1 minute (cron: * * * * *) but only activate during typical game hours (e.g., Thursday-Monday for NFL). The function calls the SportsData.io scores endpoint with your API key. For each game in the response, update the corresponding Firestore sports_scores document using admin.firestore().collection('sports_scores').doc(gameId).set({...scoreData}, {merge: true}). This merge:true ensures only changed fields are updated, not the entire document. Add logic to detect status changes (InProgress → Final) and trigger push notifications for users following those teams.

1const functions = require('firebase-functions');
2const admin = require('firebase-admin');
3const axios = require('axios');
4admin.initializeApp();
5
6const API_KEY = functions.config().sportsdata.key;
7
8exports.updateSportsScores = functions.pubsub
9  .schedule('every 1 minutes')
10  .onRun(async () => {
11    const url = `https://api.sportsdata.io/v3/nfl/scores/json/ScoresByWeek/2025/1`;
12    const { data } = await axios.get(url, {
13      headers: { 'Ocp-Apim-Subscription-Key': API_KEY },
14    });
15
16    const db = admin.firestore();
17    const batch = db.batch();
18
19    for (const game of data) {
20      const ref = db.collection('sports_scores').doc(String(game.ScoreID));
21      batch.set(ref, {
22        gameId: String(game.ScoreID),
23        sport: 'NFL',
24        homeTeam: game.HomeTeam,
25        awayTeam: game.AwayTeam,
26        homeScore: game.HomeScore || 0,
27        awayScore: game.AwayScore || 0,
28        status: game.Status,
29        quarter: game.Quarter ? `Q${game.Quarter}` : null,
30        timeRemaining: game.TimeRemaining,
31        startTime: new Date(game.DateTime),
32        lastUpdated: admin.firestore.FieldValue.serverTimestamp(),
33      }, { merge: true });
34    }
35
36    await batch.commit();
37    return null;
38  });

On your home page or sports tab, add a Container at the top for the ticker. Inside it, add a ListView with scroll direction set to Horizontal. Add a Backend Query to the ListView pointing to the sports_scores collection filtered by status == InProgress (showing only live games). Turn off Single Time Query so it is a real-time listener — scores update instantly as Firestore changes. Set Generate Dynamic Children on the ListView. Each child is a Container (fixed width 200px) showing: home team abbreviation, away team abbreviation, score (homeScore vs awayScore), and the current quarter and time (Q3 2:45). Add a Timer widget or AnimatedContainer to make the ListView auto-scroll continuously using a Custom Action that increments the scroll controller position every 3 seconds.

Create a GameDetail page with a Page Parameter gameId (String). Add a Backend Query loading the game document. Show the full score header: team names, logos (from an assets map or URL), quarter, and time remaining. Below the score, add a TabBar with three tabs: (1) Play-by-Play: a Backend Query on the play_by_play subcollection ordered by recordedAt descending, displayed as a ListView of play descriptions. (2) Box Score: a Container with a table layout showing stats from the game document's stats Map field if your API provides them. (3) Standings: a Backend Query on a team_standings collection showing the league table sorted by wins. Add a follow toggle button — when toggled, add the gameId to the user's followedGames array in Firestore so the notification logic can target them.