Vishal Tyagi
← Return to Projects
Mobile·shipped

Crickiaa

Flutter UI for a gully cricket match management app — OTP-based login, match listing, team creation, and batting/bowling stats screens. Started from Figma-generated scaffolding; real work was adding SVG icons, OTP auth integration, and fixing Android builds.

Date Shipped2024-08
Estimated Reading1 min read
Lifecycle Statusshipped
Primary Tech Stack
Flutter, Dart, GetX

A Flutter frontend for a gully cricket (informal street cricket) match management app with OTP phone authentication, match listing, team creation, and score tracking screens.

What’s there

The app covers the UI flows you’d expect for a cricket app:

  • Auth: OTP-based phone login using sms_autofill and pin_code_fields — the user enters their phone number, receives an OTP, and logs in. No email/password.
  • Match listing: Browse current and past matches.
  • Team creation: Set up teams with player names.
  • Batting/bowling stats: Score entry screens.

State management is GetX; navigation and controllers are wired through GetX’s dependency injection. Cached network images (cached_network_image) handle remote player/team assets without blocking the UI.

Starting point

The initial screen structure came from a Figma-to-Flutter design tool (evident from generated route names and the app_export.dart scaffolding pattern). The actual code work was adding SVG icons for UI elements, fixing a non-breaking space character issue that broke rendering, and resolving an Android build configuration error.

The data layer — backend API integration, actual match persistence — was planned but not implemented in this repo. The models (MatchesModel, SportscardItemModel) are defined but consume static/dummy data.

Stack

  • Flutter 2.x / Dart (SDK >=2.12.0), GetX
  • flutter_svg, cached_network_image, connectivity_plus
  • sms_autofill + pin_code_fields for OTP flow
  • Custom DM Sans font

Timeline: Aug 2024 · UI frontend only