Skip to content

Phase 4: Home & Dashboard 🏠

This phase marks the transition into feature-specific documentation, focusing on the main user dashboard, data visualization, and educational content.

🖼️ UI Reference

Home Top{: .mobile-frame } Home Bottom{: .mobile-frame } Plastic & Metal{: .mobile-frame }

🏠 Home Dashboard (home_screen.dart)

The central hub for user engagement, implemented using CustomScrollView and Slivers for a fluid experience.

Components:

  • SliverAppBar: Flexible header that collapses on scroll.
  • Welcome Card: Shows current tier (e.g., Bronze) and total points.
  • Section Headers: Reusable SectionHeader widget with "See All" actions.

A dynamic slider showing community impact.

logic:

  • Fetches data from global_stats collection in Firestore.
  • Animates counts (Bottles, Cans, Weight) using a sliding animation.
  • Updates in real-time as users worldwide recycle.

📚 Educational Content (plastic_metal_screen.dart)

A guide for new users on how to use the RVM (Reverse Vending Machines).

  • Materials List: Visual guide of what is accepted (Juice bottles, Tin cans, etc.).
  • Process Steps: 4-step walkthrough: Scan → Open → Insert → Earn.
  • Location CTA: Quick link to the Map screen to find the nearest machine.