Skip to content

khalidKE/WeatherApp

Repository files navigation

WeatherWise

WeatherWise is a Flutter-based mobile application that provides comprehensive weather information, including current conditions, hourly and weekly forecasts, and an interactive weather map. Featuring a clean, modern UI with dark/light mode support, the app is designed with modularity and maintainability in mind.


🌟 Features

  • Current Weather: View temperature, "feels like" value, and general conditions.
  • Location Display: Displays the current location (hardcoded to New York, NY for demo).
  • Weather Details: Includes wind speed, humidity, and atmospheric pressure.
  • Hourly Forecast: 24-hour forecast with temperature and conditions.
  • Weekly Forecast: 7-day forecast with high and low temperatures.
  • Interactive Weather Map: View temperature, precipitation, cloud, and wind layers (via OpenWeatherMap).
  • Dark/Light Mode: Seamlessly switch between themes.
  • Responsive UI: Built with CustomScrollView and Sliver widgets for fluid scrolling.

🚀 Getting Started

Prerequisites

  • Flutter SDK: >=3.0.0
  • Dart: >=2.17.0
  • IDE: Android Studio, VS Code, or any Flutter-compatible IDE
  • OpenWeatherMap API Key: Required for weather map functionality

Installation

  1. Clone the Repository

    git clone https://github.com/yourusername/weatherwise.git
    cd weatherwise
  2. Install Dependencies Ensure the following are in your pubspec.yaml:

    dependencies:
      flutter:
        sdk: flutter
      flutter_map: ^7.0.2
      latlong2: ^0.9.1
      weather_icons: ^3.0.0
      intl: ^0.19.0

    Then run:

    flutter pub get
  3. Configure Assets Add sky.webp to the lib/ directory and update pubspec.yaml:

    assets:
      - lib/sky.webp
  4. Run the App

    flutter run

🧭 Project Structure

lib/
├── main.dart                    # Entry point of the application
├── weather_wise_app.dart        # Theme and main app setup
├── weather_dashboard.dart       # Weather overview dashboard
├── location_display.dart        # Location display widget
├── current_weather_display.dart # Current weather widget
├── weather_details_display.dart # Detailed metrics widget
├── weather_detail_item.dart     # Reusable detail item widget
├── hourly_forecast_display.dart # 24-hour forecast widget
├── weekly_forecast_display.dart # 7-day forecast widget
├── weather_map_display.dart     # Interactive weather map widget
└── sky.webp                     # Background image for SliverAppBar

📦 Dependencies


📱 Usage

  • Launch the app to access the full weather dashboard.
  • Use the app bar icon to toggle between light and dark modes.
  • Scroll to view hourly and weekly forecasts, as well as the interactive weather map.
  • Use the dropdown in the map view to switch between weather layers.

⚠️ Notes

  • Currently, weather data and location are hardcoded (New York, NY).
  • Integrate real-time weather API and device location for dynamic updates.
  • Ensure a valid OpenWeatherMap API key is configured for the map to work.
  • The background image sky.webp must exist in the lib/ folder and be declared in pubspec.yaml.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published