How to Create a Mobile Esports Platform with Live Competitions in FlutterFlow

Create a tournaments collection with fields: name (String), game (String), format (String: 'single_elimination', 'round_robin', 'swiss'), maxTeams (Integer), startDate (Timestamp), prizePool (String), status (String: 'registration', 'in_progress', 'completed'), organizedBy (String). Under each tournament, add a matches subcollection: team1Id (String), team2Id (String), team1Name (String), team2Name (String), round (Integer), matchNumber (Integer), score1 (Integer, nullable), score2 (Integer, nullable), team1Submitted (Map: {score1, score2}), team2Submitted (Map: {score1, score2}), winnerId (String, nullable), status (String: 'scheduled', 'live', 'completed'), scheduledTime (Timestamp). Create a teams collection: name (String), captainId (String), memberIds (String Array), logoUrl (String), wins (Integer), losses (Integer).

Create a Custom Widget named TournamentBracket that receives a list of match documents as a parameter. The widget renders a horizontal tree layout: Round 1 matches on the left, each pair of winners connecting to a Round 2 match to the right, and so on until the final. Each match node is a Container showing team1Name vs team2Name with scores. Highlight the winner in green and the loser in grey. Connect matches with painted lines using CustomPainter. For an 8-team single elimination bracket, you have 4 Round 1 matches, 2 Round 2 matches, and 1 final. The widget calculates vertical spacing to align match connectors properly.

1// Custom Widget: TournamentBracket (simplified)
2import 'package:flutter/material.dart';
3
4class TournamentBracket extends StatelessWidget {
5  final List<Map<String, dynamic>> matches;
6  const TournamentBracket({super.key, required this.matches});
7
8  @override
9  Widget build(BuildContext context) {
10    final rounds = <int, List<Map<String, dynamic>>>{};
11    for (final m in matches) {
12      final r = m['round'] as int;
13      rounds.putIfAbsent(r, () => []).add(m);
14    }
15    final maxRound = rounds.keys.reduce(
16      (a, b) => a > b ? a : b);
17    return SingleChildScrollView(
18      scrollDirection: Axis.horizontal,
19      child: Row(
20        crossAxisAlignment: CrossAxisAlignment.center,
21        children: List.generate(maxRound, (i) {
22          final round = i + 1;
23          final roundMatches = rounds[round] ?? [];
24          roundMatches.sort((a, b) =>
25            (a['matchNumber'] as int)
26              .compareTo(b['matchNumber'] as int));
27          return Padding(
28            padding: const EdgeInsets.symmetric(
29              horizontal: 16),
30            child: Column(
31              mainAxisAlignment:
32                MainAxisAlignment.spaceEvenly,
33              children: roundMatches.map((m) {
34                return _MatchCard(match: m);
35              }).toList(),
36            ),
37          );
38        }),
39      ),
40    );
41  }
42}
43
44class _MatchCard extends StatelessWidget {
45  final Map<String, dynamic> match;
46  const _MatchCard({required this.match});
47
48  @override
49  Widget build(BuildContext context) {
50    final winner = match['winnerId'];
51    return Container(
52      width: 200, margin: const EdgeInsets.all(8),
53      decoration: BoxDecoration(
54        border: Border.all(color: Colors.grey),
55        borderRadius: BorderRadius.circular(8)),
56      child: Column(children: [
57        _teamRow(match['team1Name'],
58          match['score1'], match['team1Id'] == winner),
59        const Divider(height: 1),
60        _teamRow(match['team2Name'],
61          match['score2'], match['team2Id'] == winner),
62      ]),
63    );
64  }
65
66  Widget _teamRow(String? name, int? score, bool won) {
67    return Container(
68      color: won ? Colors.green.shade50 : null,
69      padding: const EdgeInsets.all(8),
70      child: Row(children: [
71        Expanded(child: Text(name ?? 'TBD',
72          style: TextStyle(
73            fontWeight: won ? FontWeight.bold
74              : FontWeight.normal))),
75        Text('${score ?? "-"}',
76          style: const TextStyle(fontSize: 16)),
77      ]),
78    );
79  }
80}

Create a TeamManagementPage where the team captain manages their roster. Display the team name, logo (editable Image with upload), and a ListView of memberIds resolved to user names. Add an Invite Member button that searches users by name and adds their UID to memberIds. For tournament registration, on the TournamentDetailPage add a Register Team button visible when status is 'registration' and the team has not already registered. On tap, create a registration document and add the team to the tournament's registered teams. Show a registration count (e.g., 6/8 teams registered) with a progress indicator.

On the MatchDetailPage, each team captain sees a Submit Score form with two number inputs (your score and opponent score). On submit, write the scores to team1Submitted or team2Submitted (based on which team the user captains) on the match document. After both teams submit, a Cloud Function compares the submissions. If they match, set score1, score2, winnerId, and status to 'completed'. If they conflict, set status to 'disputed' and notify the tournament admin. The admin sees a Dispute Resolution panel showing both submissions and can manually set the final score. This prevents any single team from fabricating results.

On the TournamentBracketPage, set the Backend Query on matches to real-time (disable Single Time Query). When a match score is updated, the bracket widget rebuilds instantly showing new scores and advancing winners. Add a LiveMatchesPage that queries matches where status is 'live', showing a ListView of currently active matches with team names, current scores, and a pulsing red Live indicator. Spectators can tap any live match to see the MatchDetailPage with real-time score updates. Use a Container with a red dot and pulsing animation (Lottie or simple AnimatedOpacity) for the live indicator.

Build a LeaderboardPage with a ListView querying teams ordered by wins descending. Each row shows: rank number, team logo, team name, wins count, losses count, and win rate percentage. Add a TabBar to filter by game (All Games, Game A, Game B). For game-specific rankings, use a Cloud Function that tallies wins per game from completed matches and stores them in a team_game_stats subcollection. Highlight the top 3 teams with gold, silver, and bronze accent colors. Add a TournamentHistoryPage accessible from each team showing all tournaments they participated in with their finishing position.