The Weather App is a simple, yet elegant weather dashboard built using SwiftUI. The app allows users to view weather information for a city, including the current temperature and the weather forecast for the upcoming days. A unique feature of this app is the ability to toggle between day and night modes, which changes the background and weather icon, providing a visually immersive experience based on the time of day. Whether it's sunny, cloudy, or night-time, the app adjusts its interface to reflect the current atmosphere.

App Credit: Paul Hudson

Key Features:

  1. Day and Night Mode Toggle
    The app includes a toggle button that allows users to switch between day and night modes. This toggle affects the background color and the weather icon, making the app feel dynamic and responsive. The day mode shows a blue sky, while the night mode switches the background to a darker tone with a moon icon.

  2. Current Weather Display
    The main screen displays the current weather for a specified city (in this case, Las Vegas). The weather is represented by an icon (such as the sun or moon) and the current temperature. The icon changes dynamically based on whether it's day or night, and the temperature is displayed in large, readable font.

  3. Weekly Weather Forecast
    Below the current weather, the app shows a simple 5-day weather forecast, with icons representing the weather conditions for each day (such as sun, clouds, or snow). Each forecast day displays the day of the week along with the expected temperature.

  4. Custom Views for a Clean UI
    The app uses custom SwiftUI views to organize the content. Separate views for the city name, main weather status, daily forecast, and the toggle button are used to maintain a clean and modular design. Each element of the app is styled with SwiftUI modifiers to give it a polished, modern look.

  5. Responsive Background with Container Relative Shape
    The background changes dynamically based on the time of day, using a ContainerRelativeShape to create a smooth gradient effect. During the day, the background is blue, while at night, it transitions to a black gradient, providing a visually pleasing and immersive experience.

  6. Interactive UI
    The toggle button for switching day and night modes is interactive, and the app responds instantly to user input. The design is fluid and intuitive, allowing users to easily explore the weather conditions for both day and night without having to navigate away from the main screen.

Technical Highlights:

  • SwiftUI for UI Components
    The app is built entirely using SwiftUI, Apple's modern framework for building user interfaces. The app takes full advantage of SwiftUI's declarative syntax and ViewModifiers to create a flexible and clean UI. Custom views like WeatherDayView, MainWeatherStatusView, and CityTextView are used to create reusable UI components.

  • Day/Night Mode Toggle
    The app's toggle functionality uses a simple @State variable (isNight) to switch between day and night modes. This triggers updates in the UI, such as changing the background color and weather icons, providing an interactive and visually rich experience.

  • Background Gradient
    The dynamic background color is achieved using SwiftUI's gradients, which shift between a blue gradient for the day and a black gradient for the night. This creates a visually appealing contrast that matches the current weather condition, enhancing the user experience.

  • Weather Icon Customization
    Weather icons are displayed using SF Symbols and are rendered with multicolor symbols to represent different weather states. This provides a sleek, modern look while keeping the design minimal and intuitive.

  • Reusable Views and ViewModifiers
    The app uses ViewModifiers to apply consistent styles across the app. For example, the titleStyle modifier is applied to the city name to give it a consistent, bold font style. This allows for easier maintenance and readability of the code.

Technical Highlights:

  • SwiftUI for UI layout, design, and state management

  • @State for interactive UI updates

  • SF Symbols for weather icons

  • LinearGradient and ContainerRelativeShape for dynamic backgrounds

  • ViewModifiers for consistent design and styling

  • VStack, HStack, ZStack for flexible layout compositions

  • Reusable custom views for modular design

Previous
Previous

Encounters Counseling

Next
Next

Guess The Flag