The first project most people start with when learning how to code is to make a Hello World app. It’s a bit tricky to make one with SwiftUI in the sense that when you start a new project, it’s already a Hello World app. Due to this, I’ll be doing things a bit differently (basically the same way you’ll find on any other tutorial). We’ll be exploring how to make Hello World app that takes your name as an input and says hello to you.
I’ll be starting this tutorial with a project already created. If needed, review my tutorial on how to create a project and then create yours. Once done, we can begin.
Once the Project is Open
We see that ContentView.swift will be selected. This will be the file that we will be working in. At the bottom, there is a preview of our app. Above that there are two structs:
- ContentView – This is the struct for the main view. We will be editing this struct.
- ContentView_Previews – This is the struct that tells our preview what to display.
Building the App
Now that we’re familiar with where we will be editing, lets go ahead and code our app to do what we want it to
Step 1 – Creating a variable to store our name
Inside our ContentView, above the var for the body, add the following code: @State var name = “world”
We’ve now created a variable called “name” and set the default value to “world”.
By adding @State to the front, we’ve told Xcode to look out for any changes to this variable wherever it is being used. You will see why this is important as we continue making this app.
Step 2 – changing the text to display what our variable holds
Change the Text(“Hello, world!”) to Text(“Hello, \(name)”)
Instead of our app always displaying “Hello, world!”, it will now display whatever is in our variable.
Step 3 – Add a text field that we can type our name into
Add the following after the .padding: TextField(“What is your name?”, text: $name)
With that single line, we’ve created a text field with a label asking for your name. The text is linked to the variable that we created by adding the “$” symbol before the variable name.
Step 4 – Running the app
At the top left of Xcode you will see a play button and a bit to the right, the name of the device simulator you want to run the app on. Click on the device name and select the simulator you want to use, and then click the play button
A simulator window should open and your app will start running.
You can change the value in the text field and see that the “world” will change to whatever you type in
Currently our text field is set to the left and not in the best position to be used. We also have no idea what the text field is for.
Try finding a solution for this, like changing the alignment and adding a label for the text field and comment your solution below!
I hope this tutorial has helped you begin your journey with Swift and SwiftUI and as always, don’t forget to follow us and subscribe to get notifications for our latest posts