Functions and closures in iOS Swift - Mini App: Build & Ship

Build: Greeting Screen

This screen lets the user enter their name and then shows a greeting message using a function and a closure.

Target UI

-------------------------
| Greeting Screen       |
|-----------------------|
| Enter your name:      |
| [______________]      |
|                       |
| [Greet Me]            |
|                       |
| Greeting:             |
|                       |
|                       |
-------------------------

Add a TextField for user to enter their name.

Add a Button labeled 'Greet Me'.

When the button is tapped, use a function that takes the name and a closure.

The function should create a greeting message and pass it to the closure.

The closure updates the greeting label with the message.

The greeting label shows 'Hello, [name]!' after tapping the button.

Starter Code

iOS Swift

import SwiftUI

struct GreetingScreen: View {
    @State private var name: String = ""
    @State private var greetingMessage: String = ""

    var body: some View {
        VStack(spacing: 20) {
            Text("Greeting Screen")
                .font(.title)

            TextField("Enter your name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)

            Button("Greet Me") {
                // TODO: Call greet function with name and closure
            }

            Text("Greeting:")
                .font(.headline)

            Text(greetingMessage)
                .font(.largeTitle)
                .foregroundColor(.blue)

            Spacer()
        }
        .padding()
    }

    // TODO: Add greet function here
}

struct GreetingScreen_Previews: PreviewProvider {
    static var previews: some View {
        GreetingScreen()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct GreetingScreen: View {
    @State private var name: String = ""
    @State private var greetingMessage: String = ""

    var body: some View {
        VStack(spacing: 20) {
            Text("Greeting Screen")
                .font(.title)

            TextField("Enter your name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)

            Button("Greet Me") {
                greet(name) { message in
                    greetingMessage = message
                }
            }

            Text("Greeting:")
                .font(.headline)

            Text(greetingMessage)
                .font(.largeTitle)
                .foregroundColor(.blue)

            Spacer()
        }
        .padding()
    }

    func greet(_ name: String, completion: (String) -> Void) {
        let message = "Hello, \(name)!"
        completion(message)
    }
}

struct GreetingScreen_Previews: PreviewProvider {
    static var previews: some View {
        GreetingScreen()
    }
}

We created a function greet that takes a name and a closure called completion. Inside the function, it builds a greeting message using the name, then calls the closure with that message. The button calls greet passing the current name and a closure that updates the greetingMessage state. This updates the UI to show the greeting. This shows how functions and closures work together to handle data and update the screen.

Final Result

Completed Screen

-------------------------
| Greeting Screen       |
|-----------------------|
| Enter your name:      |
| [Alice__________]     |
|                       |
| [Greet Me]            |
|                       |
| Greeting:             |
|                       |
| Hello, Alice!         |
-------------------------

User types their name in the text field.

User taps the 'Greet Me' button.

The greeting label updates to say 'Hello, [name]!'.

Stretch Goal

Add a Clear button that resets the name and greeting message to empty strings.

💡 Hint

Add another Button labeled 'Clear' below the 'Greet Me' button. In its action, set both name and greetingMessage to "".