Optionals and unwrapping in iOS Swift - Mini App: Build & Ship

Build: Optional Unwrapping Demo

This screen shows how to safely unwrap an optional string entered by the user and display a greeting message.

Target UI

-------------------------
| Optional Unwrapping   |
|-----------------------|
| Enter your name:      |
| [______________]      |
| [Show Greeting]       |
|                       |
| Greeting will appear  |
| here after unwrapping |
-------------------------

Add a TextField for user to enter their name (optional String).

Add a Button labeled 'Show Greeting'.

When button is tapped, unwrap the optional safely.

If name is present, show 'Hello, [name]!' below the button.

If name is nil or empty, show 'Please enter your name.' message.

Use safe unwrapping techniques (if let or guard let).

Starter Code

iOS Swift

import SwiftUI

struct OptionalUnwrappingDemo: View {
    @State private var name: String? = nil
    @State private var greeting: String = ""

    var body: some View {
        VStack(spacing: 20) {
            Text("Optional Unwrapping")
                .font(.title)
                .bold()

            TextField("Enter your name", text: Binding(
                get: { name ?? "" },
                set: { name = $0.isEmpty ? nil : $0 }
            ))
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(.horizontal)

            Button("Show Greeting") {
                // TODO: Add unwrapping logic here
            }
            .buttonStyle(.borderedProminent)

            Text(greeting)
                .font(.headline)
                .foregroundColor(.blue)
                .padding()

            Spacer()
        }
        .padding()
    }
}

struct OptionalUnwrappingDemo_Previews: PreviewProvider {
    static var previews: some View {
        OptionalUnwrappingDemo()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct OptionalUnwrappingDemo: View {
    @State private var name: String? = nil
    @State private var greeting: String = ""

    var body: some View {
        VStack(spacing: 20) {
            Text("Optional Unwrapping")
                .font(.title)
                .bold()

            TextField("Enter your name", text: Binding(
                get: { name ?? "" },
                set: { name = $0.isEmpty ? nil : $0 }
            ))
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(.horizontal)

            Button("Show Greeting") {
                if let unwrappedName = name, !unwrappedName.isEmpty {
                    greeting = "Hello, \(unwrappedName)!"
                } else {
                    greeting = "Please enter your name."
                }
            }
            .buttonStyle(.borderedProminent)

            Text(greeting)
                .font(.headline)
                .foregroundColor(.blue)
                .padding()

            Spacer()
        }
        .padding()
    }
}

struct OptionalUnwrappingDemo_Previews: PreviewProvider {
    static var previews: some View {
        OptionalUnwrappingDemo()
    }
}

We use a TextField bound to an optional String? by creating a custom Binding that converts empty strings to nil and vice versa. When the user taps the button, we safely unwrap the optional using if let. If the name exists and is not empty, we show a greeting message. Otherwise, we prompt the user to enter their name. This demonstrates safe unwrapping of optionals to avoid crashes and handle missing data gracefully.

Final Result

Completed Screen

-------------------------
| Optional Unwrapping   |
|-----------------------|
| Enter your name:      |
| [Alice         ]      |
| [Show Greeting]       |
|                       |
| Hello, Alice!         |
-------------------------

User types their name in the text field.

User taps 'Show Greeting' button.

If name is entered, greeting 'Hello, [name]!' appears below.

If text field is empty, message 'Please enter your name.' appears.

Stretch Goal

Add a 'Clear' button that resets the text field and greeting message.

💡 Hint

Add another Button below 'Show Greeting' that sets 'name' to nil and 'greeting' to empty string.