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:
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.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.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.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.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.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 likeWeatherDayView
,MainWeatherStatusView
, andCityTextView
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, thetitleStyle
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