DEV Community: Mayank Variya

Khelo: From Streets to Stadiums - A Developer's Guide 🏏

Mayank Variya — Thu, 24 Oct 2024 09:00:01 +0000

Open-Source, Multi-Platform Cricket Management App Built with Flutter & Firebase

Hello, fellow developers! 👋

Are you a cricket enthusiast who also loves to build, extend, or explore apps? We’re excited to introduce Khelo, an open-source, multi-platform cricket management app built with Flutter. Whether you’re looking to learn new patterns like Riverpod for state management or want to dive into real-time data handling with Firebase, Khelo offers a great learning opportunity for developers.

Why Khelo?

Khelo isn’t just for end users—it’s for developers who want to see how a modern, multi-platform app can be structured using Flutter. We’ve designed it to serve as a resource for anyone exploring Flutter, Firebase, and state management while utilizing the MVVM (Model-View-ViewModel) architecture to keep the app maintainable and scalable.

Tech Stack at a Glance

Flutter for cross-platform development (iOS & Android)
Firebase Firestore for real-time database management and Firebase Authentication for user handling
Riverpod for scalable state management
MVVM Architecture for a clean separation of concerns between the UI and business logic

What Can You Learn From Khelo?

MVVM with Riverpod: Discover how the MVVM architecture is combined with Riverpod for state management, ensuring a clean, modular design.
Real-Time Data Handling with Firebase: See how Firestore’s real-time features are used for live updates in match stats, player info, and team data.
Authentication with Firebase: Understand how Firebase Authentication provides seamless user management and security.
Modular Architecture: Learn how we’ve separated features like Profile Management, Team Creation, and Match Data Recording into manageable components.

Core Features for Developers to Explore

Player & Team Profiles: Learn how to structure data models and implement CRUD operations for profiles and teams.
Match Tracking: Dive into the logic behind recording match data, from toss results to performance tracking.
Modular UI Components: Understand how the UI is built with reusable and extensible components, following the MVVM architecture.
Performance & Statistics Tracking: Explore the logic used to analyze player and team performance over time.

Explore the Repo

Check out the Khelo GitHub repo to explore the full codebase. It’s a great opportunity to learn from a real-world app built with the latest tools in Flutter, Firebase, and state management practices.

GitHub Repo: Khelo on GitHub

Get Started

Ready to dive in? Fork the repo, explore the architecture, and use Khelo as a resource to advance your skills in Flutter development.

canopas / khelo

Khelo - An open-source app for easy cricket team management and performance tracking.

Khelo - From Streets to Stadiums 🏏

Your Ultimate Companion for Cricket Management

Overview

Welcome to Khelo, an open-source multi-platform app designed to cater to all your cricket needs, whether you're a cricket enthusiast, a team manager, or a player. With a wide array of features, our app simplifies the management of cricket teams, players, matches, and performance records. It's like having a personal assistant for your team!

Khelo is built using Flutter and Dart, leveraging Firestore for database management and Firebase for authentication. This project employs Riverpod as its state management solution, adhering to a clean architecture approach organized into multiple modules.

Download App

Screenshots

Matches Record	Teams List	Start New Match

Score Board	Commentary	Squad

Features 🌟🌟

Profile Management: Effortlessly create and manage profiles for players, coaches, and team managers.
Team Creation: Form your dream team by easily adding players and managing team compositions.
Player Management…

View on GitHub

Streaming Real-Time Data in Flutter: A Step-by-Step Guide for Developers

Mayank Variya — Thu, 24 Oct 2024 08:59:07 +0000

In today’s fast-paced world, providing real-time data updates is crucial for any application. Users expect instant access to live information, whether it’s scores, stats, or any other dynamic data. This guide will demonstrate how to manage real-time data updates in a Flutter application using Firebase, illustrated through an example of streaming cricket match data in our Khelo app—a cricket team management platform.

Why Choose Streams?

Streams are an excellent way to handle asynchronous data in Flutter. They allow your app to listen for updates in real time, making them perfect for applications that require live data. With Firebase Firestore, you can easily implement this functionality for any type of data.

Setting Up Your Flutter Project

Before diving into the code, ensure you have the following set up:

Flutter SDK: Install and configure the Flutter SDK.
Firebase Project: Create and configure your Firebase project.
Firestore Database: Set up your Firestore database to store your data.
Riverpod Package: Add the Riverpod package to manage state efficiently.
Freezed Package: Add the Freezed package to simplify data class creation and immutable state management.

Step 1: Create Firestore Collection

Start by creating a Firestore collection named matches, where each document represents a cricket match. Here’s how you might define your Firestore setup in your app:

final _dataCollection = FirebaseFirestore.instance.collection('matches');

Step 2: Stream Data by ID

Next, implement a function to stream data by its unique ID. This function will listen for changes in the Firestore document and return updated data in real time.

Stream<MatchModel> streamDataById(String id) {
  return _dataCollection.doc(id).snapshots().asyncMap((snapshot) async {
    if (snapshot.exists) {
      return MatchModel.fromMap(snapshot.data()!);
    }
    throw Exception('Data not found');
  }).handleError((error, stack) => throw AppError.fromError(error, stack));
}

Key Points:

snapshots(): Subscribes to real-time updates from Firestore.
asyncMap: Performs asynchronous transformations on the data.
Error Handling: Utilizes handleError to manage any errors gracefully.

Step 3: Implement State Management with Riverpod

Create a state class to manage the data state within your application:

@freezed
class MatchDetailTabState with _$MatchDetailTabState {
  const factory MatchDetailTabState({
    Object? error,
    MatchModel? match,
    @Default(false) bool loading,
  }) = _MatchDetailTabState;
}

Setting Up the Provider

Use a StateNotifierProvider to expose your data state throughout the app:

final matchDetailTabStateProvider = StateNotifierProvider.autoDispose<
    MatchDetailTabViewNotifier, MatchDetailTabState>(
  (ref) => MatchDetailTabViewNotifier(ref.read(matchServiceProvider)),
);

Step 4: Load Data in the Notifier

Implement the logic to load data using the stream within your notifier:

class MatchDetailTabViewNotifier extends StateNotifier<MatchDetailTabState> {
  MatchDetailTabViewNotifier(this._matchService) : super(const MatchDetailTabState());

  final MatchService _matchService;
  StreamSubscription? _matchStreamSubscription;
  late String _matchId; // Declare _matchId here

  void setData(String matchId) {
    loadMatch(matchId);
  }

  void loadMatch(String matchId) {
    state = state.copyWith(loading: true); // Set loading state

    _matchStreamSubscription = _matchService.streamMatchById(matchId).listen(
      (match) {
        state = state.copyWith(match: match, loading: false);
      },
      onError: (error) {
        state = state.copyWith(error: AppError.fromError(error), loading: false);
      },
    );
  }

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

Explanation:

Loading State: The loading state is set to true while the data is being fetched and updated to false once the data is received or if an error occurs.
State Management: Updates the state whenever new match data is received.
Error Handling: Captures any errors and updates the state accordingly.
Resource Management: Cancels the stream subscription when the notifier is disposed to avoid memory leaks.

Step 5: Building the UI

Create a simple UI to display the data. Show a loading indicator while data is being fetched, and then display the information once it is available.

class MatchDetailTabScreen extends ConsumerStatefulWidget {
  final String matchId;

  const MatchDetailTabScreen({super.key, required this.matchId});

  @override
  ConsumerState createState() => _MatchDetailTabScreenState();
}

class _MatchDetailTabScreenState extends ConsumerState<MatchDetailTabScreen> {
  late MatchDetailTabViewNotifier notifier;

  @override
  void initState() {
    super.initState();
    notifier = ref.read(matchDetailTabStateProvider.notifier);
    runPostFrame(() => notifier.loadMatch(widget.matchId));
  }

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(matchDetailTabStateProvider);

    return AppPage(
      title: state.match?.name ?? 'Match Details', // Handle null case
      body: Builder(
        builder: (context) {
          if (state.error != null) {
            return ErrorScreen(state.error); // Ensure error is not null
          }
          if (state.loading) {
            return Center(child: AppProgressIndicator());
          }
          return //Show UI;
        },
      ),
    );
  }
}

Explanation:

Loading Indicator: Displays a CircularProgressIndicator while the data is being fetched.
Error Handling: Shows an error message if something goes wrong.
Display Data: Displays the match details once they are loaded.

Example Implementation Screenshots

Conclusion

With these steps, you can successfully manage real-time data updates in your Flutter app using Firebase Firestore. By implementing streams, you ensure that users receive timely updates, enhancing their overall experience in your applications.

For more detailed code examples and additional information, feel free to check out our Khelo GitHub repository. If you find this guide helpful, please give it a star on GitHub!