Alive - Live Streaming UI Application

Alive is a premium live-streaming portal assessment built using Flutter, implementing a responsive user interface, smooth animations, and a strict MVVM (Model-View-ViewModel) architecture powered by Riverpod state management and Flutter Hooks views.

---

Technical Features

• Splash Screen Transition: Multi-stage opening sequence featuring an elastic scale-up bounce, a delayed tagline fade-in, and a linear loading cue before automatic authentication checks.
• Authentication: Integrated with Firebase Google Authentication for secure sign-in, with standard mock login workflows as fallbacks for email forms and Facebook buttons (Demo Mode).
• Responsive Home Interface: Streamer cards grid adapting column spans dynamically based on device widths, complete with category selection headers and country capsule filters.
• Pixel-Perfect Bottom Navigation: Custom-painted navigation bar with a snug U-shaped dip, a structural connecting stem, and absolute baseline-aligned labels across all screen form-factors.

---

Architectural & Code Structure

The project separates logic into two top-level domains: core (global cross-cutting configurations, utilities, and widgets) and features (decoupled modular business domains).

Directory Map

lib/
├── core/                           # Shared infrastructure & utilities
│   ├── constants/                  # Colors, assets & static strings
│   ├── providers/                  # Centralized Riverpod state providers
│   ├── routes/                     # GoRouter configurations
│   ├── services/                   # Service layer declarations (Firebase Auth)
│   ├── theme/                      # Styling themes settings
│   └── widgets/                    # Core reusable custom widgets
│
├── features/                       # Modular vertical feature slices
│   ├── auth/                       # Authentication context
│   │   ├── viewmodels/             # Controllers managing authentication state
│   │   ├── views/                  # UI view files consuming the viewmodels
│   │   └── widgets/                # Widgets specific to authentication
│   │
│   ├── home/                       # Home Streamer grid context
│   │   ├── models/                 # Immutable entity models (Streamer data)
│   │   ├── viewmodels/             # Notifiers managing categories and country filters
│   │   ├── views/                  # UI screens (Home layout)
│   │   └── widgets/                # Custom widgets (Navbar, streamer cards)
│   │
│   └── splash/                     # Opening transitions context
│       └── views/                  # Splash screen layout
│
└── main.dart                       # Entry point of the application

---

Layer Responsibilities

1. Core Layer (lib/core/)

• Constants: Declares app colors (lime-green gradients matching designs) and file assets.
• Providers (app_providers.dart): Standardizes dependency injection, making services and viewmodels easily mockable for testing.
• Widgets: Standardized core widgets to maximize code reuse:
  • CustomTextField wraps standard inputs with label headers and visibility eye toggles.
  • GradientButton manages custom linear horizontal gradients and shadow cards.
  • SocialButton renders rounded capsule sign-in handlers.

2. Feature-based MVVM Layer (lib/features/)

Each vertical slice contains its own isolated context:

• Models: Declarations of immutable entities like StreamerModel wrapping flag emojis, username, viewer metrics, and follow states.
• ViewModels: Business logic layers subclassing Riverpod's StateNotifier. They are pure Dart modules responsible for managing states, querying search listings, and communicating with services. They contain no UI layout dependencies.
• Views: UI screen layers extending HookConsumer widgets. They watch state changes from ViewModels and utilize Flutter Hooks (useState, useMemoized, useEffect) to manage local animations or controller lifecycles without boilerplate.

---

Spacing & Responsiveness Strategy

1. Grid Column Adapters: The streamer grid in home_screen.dart reads screen dimensions via MediaQuery to adjust column counts dynamically:
   • Phones (width ≤ 600px): 2 columns
   • Small Tablets / Landscape (600px < width ≤ 900px): 3 columns
   • Large Tablets / Desktops (width > 900px): 4 columns
2. Keyboard Overlap Prevention: The login screen monitors keyboard view insets. When the software keyboard is open, the absolute-bottom wave footer is hidden. This prevents inputs from being obscured and guarantees a clean, scrollable workspace.

---

Getting Started

Prerequisites

• Flutter SDK (Latest Stable)
• Android SDK (for packaging APK)
• CocoaPods (for iOS targets)

Setup & Run

1. Clone the repository.
2. Initialize dependencies:

   flutter pub get

3. Run unit tests to check status:

   flutter test

4. Run the application:

   flutter run

5. Compile a release/debug Android build:

   flutter build apk --debug

lvs_test

lvs_test