How to Build a Live Cricket Score App in Flutter (2026)

Build a Live Cricket Score App in Flutter

Flutter is the most popular cross-platform framework for building mobile apps in 2026. In this tutorial, you will learn how to build a fully functional live cricket score app in Flutter using the CricLive API.

Prerequisites

• Flutter SDK 3.x or later
• A free CricLive API key — get one here
• Basic knowledge of Dart and Flutter widgets

Step 1 — Add Dependencies

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  provider: ^6.1.2

Step 2 — Create the API Service

// lib/services/cricket_api.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class CricketApi {
  static const _base = 'https://cricketliveapi.com/api/v1';
  static const _key  = 'YOUR_API_KEY_HERE';
  static get _headers => {'Authorization': 'Bearer $_key'};

  static Future getLiveMatches() async {
    final res = await http.get(Uri.parse('$_base/cricket/live'), headers: _headers);
    return jsonDecode(res.body)['data'] as List;
  }
}

Step 3 — Live Scores Screen with Auto-Refresh

class LiveScoresScreen extends StatefulWidget {
  const LiveScoresScreen({super.key});
  @override State createState() => _State();
}

class _State extends State {
  List _matches = [];
  Timer? _timer;

  @override void initState() {
    super.initState();
    _fetch();
    _timer = Timer.periodic(Duration(seconds: 10), (_) => _fetch());
  }

  Future _fetch() async {
    final m = await CricketApi.getLiveMatches();
    setState(() => _matches = m);
  }

  @override void dispose() { _timer?.cancel(); super.dispose(); }

  @override Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: Text("Live Cricket Scores")),
    body: ListView.builder(
      itemCount: _matches.length,
      itemBuilder: (_, i) => ListTile(
        title: Text("${_matches[i]['team1']} vs ${_matches[i]['team2']}"),
        subtitle: Text(_matches[i]['status'] ?? ''),
        trailing: Text(_matches[i]['score'] ?? ''),
      ),
    ),
  );
}

What You Can Build Next

• Scorecard screen using /cricket/match/{id}/scorecard
• Ball-by-ball commentary screen
• Fantasy points leaderboard
• Push notifications for wickets and boundaries

Get your free API key at cricketliveapi.com/register.