Play. Learn. Conserve.
WaterGuardian is a gamified mobile application built with Flutter that motivates users to build sustainable water‑saving habits through challenges, real‑time usage tracking, badges, and community engagement.
- Overview
- Features
- System Architecture
- App Flow
- Tech Stack
- Getting Started
- Project Structure
- Screens
- Roadmap
- Team
Water scarcity affects billions of people globally. WaterGuardian addresses this by transforming water conservation into an engaging, rewarding experience. The application combines:
- Gamification — challenges and badges that reward conservation.
- Real‑time tracking — daily water usage visualization.
- Community support — leaderboards that foster friendly competition.
| Feature | Description |
|---|---|
| 🏠 Home Dashboard | Quick-access grid to every module of the app. |
| 📊 Water Usage Tracker | View daily water consumption records. |
| 🏆 Challenges | Join timed conservation challenges (daily & weekly). |
| 🎖️ Badges & Rewards | Earn recognition for milestones and streaks. |
| 🌐 Community Leaderboard | Compete with others and track your rank. |
| 👤 User Profile | Manage account info and privacy settings. |
The application follows a clean, layered architecture where each screen is an independent widget. A Navigator orchestrates screen transitions, and a central MaterialApp provides theming and routing.
┌──────────────────────────────────────────────────────────────────┐
│ WATERGUARDIAN APP │
│ (Flutter / Dart) │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ MaterialApp │ │
│ │ ├─ Theme: ColorScheme (teal / blue) │ │
│ │ └─ Routes: Navigator.push / pushReplacement │ │
│ └──────────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────▼───────────────────────────────┐ │
│ │ Screen Layer │ │
│ │ │ │
│ │ SplashScreen ──▶ LoginScreen ──▶ HomeScreen │ │
│ │ │ │ │
│ │ ┌───────────────────────────┼───────────────────┐ │ │
│ │ ▼ ▼ ▼ │ │
│ │ AboutScreen ChallengesScreen Profile │ │
│ │ WaterUsageScreen BadgesScreen Screen │ │
│ │ CommunityScreen │ │
│ └──────────────────────────┬───────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────▼───────────────────────────────┐ │
│ │ UI Component Layer │ │
│ │ Forms · GridViews · Cards · BottomNavigationBar · │ │
│ │ TextFormFields · Lists · Dialogs │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ State / Data Layer │ │
│ │ StatefulWidget (setState) │ │
│ │ Local in-memory data (challenges, badges, usage, │ │
│ │ leaderboard) │ │
│ └──────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
User Interaction
│
▼
┌──────────────┐ ┌──────────────────────┐ ┌──────────────────┐
│ UI Widget │──▶│ Event Handler │──▶│ Screen / State │
│ (Taps, │ │ (onTap, onChanged, │ │ (setState, │
│ Inputs) │ │ Form validation) │ │ Navigator) │
└──────────────┘ └──────────────────────┘ └──────────────────┘
│
▼
┌──────────────────┐ ┌──────────────────────┐ ┌───────────────┐
│ UI Update │◀───│ Rendered Result │◀───│ Local Data │
│ (rebuild) │ │ (cards, lists, │ │ (in-memory) │
└──────────────────┘ │ leaderboards) │ └───────────────┘
└──────────────────────┘
| Layer | Components | Responsibility |
|---|---|---|
| App Root | MaterialApp, ThemeData |
Global theming, navigation stack |
| Screens | SplashScreen, LoginScreen, HomeScreen, AboutScreen, ChallengesScreen, BadgesScreen, WaterUsageScreen, CommunityScreen, ProfileScreen |
High-level user journeys |
| Widgets | Form, GridView, Card, BottomNavigationBar, ListTile |
Reusable UI building blocks |
| State | StatefulWidget + setState, GlobalKey<FormState> |
Local UI state & validation |
| Data | In-memory List<Map<String, dynamic>> |
Mock datasets for challenges, badges, usage, leaderboard |
- Splash Screen — Branded intro (3-second delay).
- Login Screen — Validated username/password form.
- Home Screen — Dashboard grid + bottom navigation (Challenges / Home / Profile).
- Modules — Navigate to About, Challenges, Badges, Water Usage, Community, and Profile from the dashboard.
- Framework: Flutter (Dart)
- State Management: Built-in
setState - Navigation: Imperative
Navigator.push/pushReplacement - Styling: Material Design, gradient backgrounds, teal/blue palette
- Flutter SDK (
>= 3.x) - Dart SDK
- Android Studio / VS Code with the Flutter plugin
# 1. Clone the repository
git clone https://github.com/harshimysarla/WaterGuardian.git
cd WaterGuardian
# 2. Get dependencies
flutter pub get
# 3. Run the app
flutter runWaterGuardian/
├── pubspec.yaml # Dependencies & project config
├── lib/
│ └── main.dart # Application entry point & all screens
Note: The entire application currently lives in a single
lib/main.dart. Refactoring into feature-based modules is planned (see Roadmap).
| Screen | Purpose |
|---|---|
| Splash | Branded 3-second intro |
| Login | Username/password authentication UI |
| Home | Main dashboard with navigation grid |
| About | Project mission & team information |
| Challenges | List of conservation challenges to join |
| Badges | Earned rewards & milestones |
| Water Usage | Daily consumption records |
| Community | Leaderboard of top savers |
| Profile | Account & privacy settings |
- Backend integration (user auth & cloud sync)
- Real-time water usage monitoring (IoT)
- Refactor into feature-based folder structure
- Local persistence (
shared_preferences/ SQLite) - Push notifications for challenges & streaks
- Multi-language support
- K. Harshith
- M. Harshith
- Guided by Mr. P. Suresh Kumar
Made with 💙 to protect our most precious resource.