First iOS app in iOS Swift - Mini App: Build & Ship

Build: Welcome Screen

This screen welcomes the user with a friendly message and a button that changes the message when tapped.

Target UI

---------------------
|                   |
|   Welcome to my   |
|      App!         |
|                   |
|   [Tap Me]        |
|                   |
---------------------

Show a centered label with the text 'Welcome to my App!'

Add a button below the label with the title 'Tap Me'

When the button is tapped, change the label text to 'You tapped the button!'

Use SwiftUI for the UI

Make sure the text and button are centered vertically and horizontally

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    // TODO: Add state variable for label text

    var body: some View {
        VStack {
            // TODO: Add Text view for label
            // TODO: Add Button view
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    @State private var labelText = "Welcome to my App!"

    var body: some View {
        VStack(spacing: 20) {
            Spacer()
            Text(labelText)
                .font(.title)
                .multilineTextAlignment(.center)
            Button("Tap Me") {
                labelText = "You tapped the button!"
            }
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
        .ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We use a @State variable labelText to hold the text shown on the screen. This allows the text to update when the button is tapped.

The VStack arranges the label and button vertically with some spacing. The Text view shows the current label text, and the Button changes the text when tapped.

We style the button with padding, background color, white text, and rounded corners for a friendly look.

The whole stack is centered vertically and horizontally using Spacer() views inside the VStack along with frame(maxWidth: .infinity, maxHeight: .infinity) to ensure the content is in the middle of the screen.

This simple app welcomes the user and responds to their tap by changing the message.

Final Result

Completed Screen

---------------------
|                   |
|  You tapped the   |
|     button!       |
|                   |
|   [Tap Me]        |
|                   |
---------------------

When the user taps the 'Tap Me' button, the label text changes from 'Welcome to my App!' to 'You tapped the button!'

The button remains visible and can be tapped multiple times but the text stays changed

Stretch Goal

Add a reset button that appears after tapping 'Tap Me' to change the label back to the original text.

💡 Hint

Use another Button that sets the label text back to 'Welcome to my App!' and show it only after the first button is tapped.