Beginners Weather App in SwiftUI

In this post we will start our SwiftUI journey. Here, we will create a basic and simple Weather app in SwiftUI.

Apple have given up Storyboard some years back, which was drag and drop way to create layout. And have shifted to coding the layout through SwiftUI.

This post have been inspired by the awesome SwiftUI Fundamentals video by Sean Allen.

So, first start XCode and click on File -> New and Project.

In the next pop-up select the App.

In the Product Name give Weather-App, but make sure Interface is SwiftUI.

In the next window give the location to save the project and click on the Create button.

Now, the XCode will open with a basic Preview.

SwiftUI is based on three stack- ZStack(z-index Stack), VStack(Vertical Stack) and HStack(Horizontal Stack).

We will first create a ZStack to give the background color to the app. Here, we are using a Linear Gradient to give the color.

Next, we will create a VStack containing a text, font sizes and font color.\

Apple provides awesome fonts which we can use in our project. So, head over to https://developer.apple.com/sf-symbols/ and download and install them.

The SF Symbols are app, which you can open in your system. We have copied the name of a cloud with sun image from here.

Next, in a VStack we will add a image and make it 180x180. Also, we are adding a Spacer beneath it. This spacer will move the image up.

Next, we will add a text with degree and also add spacing in the VStack.

Now, we will create a HStack and inside it a VStack with day of week, image and degrees.

This will be a repeating code, so we will refactor it. In SwiftUI to refactor click on a section with Cmd press and then in dropdown menu click on Extract Subview.

Next, we will name this view WeatherDayView and pass the three required variables in it.

We will call the WeatherDayView four more times with different variables. Also, we are changing the down color to purple.

We can also add padding to add spacing in our app.

Next, we will create a button where we have to give a label containing it’s text and styles.

Our basic app is complete, but we will refactor it in subviews. First click on the LinearGradient with Cmd press and extract the subview.

We have also refactored other parts and named them accordingly. And we are also passing different variables to them.

Now, all of our extracted and updated subviews are as follows.

Next, we will also extract the button in a WeatherButton subview.

The logic for the same with different variables are as below.

Since, the button is a generic component we can put it in different swift file.

Now, we will create a dark mode in our app. For this we will use state in our project. Here, we have declared a state variable of isNight and made it initially to false.

Now, using a ternary operator we are giving different values to it, based on isNight is true or false.

We are changing the isNight on toggle on click of the button. Now, the night mode is visible.

We can also refactor our code to use binding. Here, we are passing the isNight variable to the BackgroundView.

In the BackgroundView, we are binding the isNight variable and putting the ternary logic here. Our app behave as earlier.

This completes our beginners app. You can find the code for the same here.