IN3510 – Personalized Weather Dashboard

A Flutter-based mobile application that fetches real-time weather data based on student index coordinates and provides offline caching capabilities.

---

📋 Student Information

• Student Index: 224152U
• Project: IN3510 Personalized Weather Dashboard
• Technology Stack: Flutter + OpenWeather REST API

---

🧮 Coordinate Derivation Formula

The application converts a student index into geographical coordinates using the following algorithm:

Index Format: XXYYZZ (e.g., 224152U)

latitude  = 5 + (XX / 10.0)
longitude = 79 + (YY / 10.0)

Example for 224152U:
- First two digits: 22
- Next two digits: 41

latitude  = 5 + (22 / 10.0)  = 5 + 2.2  = 7.20°N
longitude = 79 + (41 / 10.0) = 79 + 4.1 = 83.10°E

Result: Coordinates (7.20°N, 83.10°E) point to a location in Sri Lanka.

---

🌐 Weather API Endpoint

Base URL:
https://api.openweathermap.org/data/2.5/weather

API Request URL Pattern:
https://api.openweathermap.org/data/2.5/weather?lat={latitude}&lon={longitude}&units=metric&appid={api_key}

Example Request (Index: 224152U):
https://api.openweathermap.org/data/2.5/weather?lat=7.20&lon=83.10&units=metric&appid=****

Used OpenWeather API

---

✨ Features Implemented

Core Requirements

✅ Student Index Input - Text field for entering student index with real-time validation
✅ Coordinate Calculation - Automatic lat/lon derivation from index
✅ Display Information - Shows index, coordinates, and request URL
✅ Fetch Weather Button - Triggers API call with loading indicator
✅ Weather Data Display - Temperature (°C), wind speed (m/s), weather code
✅ Last Updated Time - Device timestamp showing when data was fetched
✅ Error Handling - Friendly error messages for network/API failures
✅ Caching with shared_preferences - Persistent local storage of last successful fetch
✅ Offline Mode - Displays cached data with "cached" tag when no internet connection

Additional Features

🎨 Modern UI Design - Glassmorphic design with gradient backgrounds
🔄 Pull-to-Refresh - Swipe down to refresh weather data
📋 Copy URL - Tap to copy request URL to clipboard
🌤️ Weather Icons - Visual weather condition indicators
⚡ Real-time Validation - Instant feedback on invalid index format

---

🚀 How to Run the Project

Prerequisites

• Flutter SDK (3.9.2 or higher)
• Android Studio / VS Code
• Android/iOS device or emulator

Installation Steps

1. Clone the repository:

   git clone https://github.com/renulucshmi/weather_app.git
   cd weather_app

2. Create .env file in the project root:

   WEATHER_API=your_openweather_api_key_here
   

   Get your free API key from: https://openweathermap.org/api

3. Install dependencies:

   flutter pub get

4. Run the application:

   flutter run

5. Build APK (optional):

   flutter build apk --release

---

📸 Screenshots

Online Mode - Live Weather Data

Screenshot showing successful weather fetch with temperature, wind speed, and weather code

![Online Mode Placeholder]

Features visible:

• Student index: 224152U
• Coordinates: 7.20°N, 83.10°E
• Request URL with masked API key
• Current temperature, wind speed, weather code
• Last updated timestamp

---

Offline Mode - Cached Data

Screenshot showing cached weather data when device is in airplane mode

![Offline Mode Placeholder]

Features visible:

• "cached" tag on weather card
• Info banner: "Can't fetch current data, but you can view the last fetched data"
• Previously fetched weather data still accessible
• Timestamp from original fetch

---

📡 Cached/Offline Behavior

How Caching Works

1. Successful Fetch:

   • When weather data is successfully fetched from the API
   • The complete response is stored in SharedPreferences
   • Data persists even after app is closed

2. Offline Detection:

   • App uses connectivity_plus package to check network status
   • Detects airplane mode, Wi-Fi off, or mobile data off

3. Offline Behavior:

   • When fetch button is tapped without internet connection
   • App automatically loads cached data (if available)
   • Displays "cached" tag and offline info message
   • If no cache exists, shows error: "No internet connection and no cached data available"

4. Cache Persistence:

   • Cached data remains until overwritten by new successful fetch
   • Survives app restarts and device reboots
   • Includes all original data: temperature, wind, weather code, coordinates, URL, and timestamp

---

💭 Reflection

Throughout this project, I gained valuable experience in building Flutter applications that integrate RESTful APIs with real-time weather data. The implementation required careful state management to handle asynchronous API calls and coordinate between multiple services like WeatherService and CacheService. One of the key challenges I encountered was designing a robust caching mechanism using SharedPreferences that could persist data across app sessions while properly handling offline scenarios with connectivity_plus. I learned the importance of creating user-friendly error messages instead of displaying raw exceptions, and implementing visual feedback through loading indicators and the "cached" tag to enhance user experience. The project also deepened my understanding of Flutter's widget lifecycle, input validation with real-time feedback, and creating a modern glassmorphic UI design. Overall, this assignment reinforced best practices in mobile development, particularly the importance of building resilient applications that function seamlessly in both online and offline environments while maintaining clean code architecture through proper separation of concerns.

---

📝 Notes for Marker

Implementation Highlights

1. Code Structure:

   • Organized using feature-based architecture (core/, ui/, services/, models/)
   • Separation of concerns: UI, business logic, and data layers
   • Clean and maintainable codebase

2. Error Handling:

   • Multiple error scenarios covered (network timeout, invalid API key, HTTP errors)
   • User-friendly error messages instead of technical exceptions
   • Graceful fallback to cached data on failure

3. User Experience:

   • Real-time input validation with inline error messages
   • Loading indicators during network requests
   • Visual feedback for cached vs. live data
   • Modern, responsive UI design

4. Testing Instructions:

   • Online Mode: Enter index "224152U" → Tap "Get Weather" → Observe live data
   • Offline Mode: Fetch weather once → Enable airplane mode → Tap "Get Weather" again → Observe cached data with "cached" tag
   • Error Handling: Use invalid API key → Observe friendly error message

5. Dependencies Used:

   • http: ^1.1.0 - REST API calls
   • shared_preferences: ^2.2.2 - Local caching
   • connectivity_plus: ^5.0.2 - Network detection
   • intl: ^0.19.0 - Date formatting
   • flutter_dotenv: ^5.1.0 - Environment variables

---

📦 Project Deliverables

• ✅ project_224152U.zip - Complete Flutter project source code
• ✅ report_224152U.pdf - Screenshots, explanation, and reflection
• ✅ video_224152U.mp4 - Live demonstration of online and offline modes

---

📄 License

This project is submitted as part of the IN3510 course assignment.

---

Last Updated: November 15, 2025
Author: Student 224152U