Built-in property wrappers (@State, @Published) in Swift - Mini Project: Build & Apply

Using Built-in Property Wrappers @State and @Published in Swift

📖 Scenario: You are building a simple SwiftUI app that tracks a user's name and shows it on the screen. You will learn how to use @State to store local state in a view and @Published to notify changes in a data model.

🎯 Goal: Create a SwiftUI app with a text field to enter a name and a label that updates automatically when the name changes. Use @State for the text field input and @Published in a model class to broadcast changes.

📋 What You'll Learn

Create a SwiftUI view with a @State variable called name initialized to an empty string.

Create a class called UserModel that conforms to ObservableObject.

Add a @Published property called userName of type String initialized to an empty string in UserModel.

Bind the text field to the @State variable name.

Update the userName property of UserModel whenever name changes.

Display the userName from UserModel in a Text view that updates automatically.

💡 Why This Matters

🌍 Real World

This project shows how to manage and share state in SwiftUI apps, which is essential for building interactive user interfaces that respond to user input.

💼 Career

Understanding <code>@State</code> and <code>@Published</code> is important for iOS developers working with SwiftUI to create responsive and maintainable apps.

1

Create a SwiftUI view with a @State variable

Create a SwiftUI struct called ContentView that conforms to View. Inside it, create a @State variable called name and set it to an empty string "".

Swift

import SwiftUI

struct ContentView: View {
    // Your code here
}

Hint

Use @State var name: String = "" inside the ContentView struct.

2

Create a UserModel class with @Published property

Create a class called UserModel that conforms to ObservableObject. Inside it, add a @Published property called userName of type String initialized to an empty string "".

Swift

import SwiftUI

struct ContentView: View {
    @State var name: String = ""

    var body: some View {
        Text("Hello, World!")
    }
}

// Your code here

Hint

Use class UserModel: ObservableObject and @Published var userName: String = "".

3

Bind the text field to @State and update UserModel

Inside ContentView, create an instance of UserModel called userModel using @StateObject. Replace the Text view with a TextField bound to the name variable. Add a .onChange modifier on name to update userModel.userName whenever name changes.

Swift

import SwiftUI

struct ContentView: View {
    @State var name: String = ""
    // Your code here

    var body: some View {
        // Your code here
    }
}

class UserModel: ObservableObject {
    @Published var userName: String = ""
}

Hint

Use @StateObject to create userModel. Bind TextField to $name. Use .onChange(of: name) to update userModel.userName.

4

Display the userName from UserModel

Below the TextField in ContentView, add a Text view that shows the text "User name is: " followed by the value of userModel.userName. This text should update automatically when userName changes.

Swift

import SwiftUI

struct ContentView: View {
    @State var name: String = ""
    @StateObject var userModel = UserModel()

    var body: some View {
        TextField("Enter your name", text: $name)
            .padding()
            .onChange(of: name) { newValue in
                userModel.userName = newValue
            }
        // Your code here
    }
}

class UserModel: ObservableObject {
    @Published var userName: String = ""
}

Hint

Use a Text view with "User name is: \(userModel.userName)" inside a VStack below the TextField.

Practice

1. What is the main purpose of the @State property wrapper in SwiftUI?

easy

A. To mark properties in a class that notify other objects when changed

B. To create a constant value that never changes

C. To store local, simple data inside a view and update the UI when it changes

D. To handle network requests asynchronously

Solution

1. Step 1: Understand what @State does

   @State is used to keep simple, local data inside a SwiftUI view.

2. Step 2: Recognize its effect on UI

   When the @State data changes, SwiftUI automatically updates the view to reflect the new data.

3. Final Answer:

   To store local, simple data inside a view and update the UI when it changes -> Option C

4. Quick Check:

   @State manages local view data = B [OK]

Hint: Remember: @State is for local view data that changes [OK]

Common Mistakes:

• Confusing @State with @Published
• Thinking @State is for class properties
• Assuming @State handles network or async tasks

2. Which of the following is the correct way to declare a @Published property inside a Swift class?

easy

A. struct MyStruct { @State var count: Int = 0 }

B. struct MyStruct { @Published var count: Int = 0 }

C. class MyClass { @State var count: Int = 0 }

D. class MyClass { @Published var count: Int = 0 }

Solution

1. Step 1: Identify where @Published can be used

   @Published is used inside classes that conform to ObservableObject, not structs.

2. Step 2: Check syntax correctness

   class MyClass { @Published var count: Int = 0 } correctly declares a class with a @Published property and initializes it.

3. Final Answer:

   class MyClass { @Published var count: Int = 0 } -> Option D

4. Quick Check:

   @Published used in classes = A [OK]

Hint: Use @Published only inside classes, not structs [OK]

Common Mistakes:

• Using @Published in structs
• Confusing @State with @Published
• Missing var keyword or initialization

3. Consider the following SwiftUI code snippet:

class Counter: ObservableObject {
    @Published var value = 0
}

struct ContentView: View {
    @StateObject var counter = Counter()
    var body: some View {
        VStack {
            Text("Count: \(counter.value)")
            Button("Increment") {
                counter.value += 1
            }
        }
    }
}

What will be displayed after tapping the "Increment" button twice?

medium

A. Count: 0

B. Count: 2

C. Count: 1

D. Count: 3

Solution

1. Step 1: Understand the initial state

   The Counter class starts with value = 0. The view shows "Count: 0" initially.

2. Step 2: Analyze button action and updates

   Each tap on "Increment" increases counter.value by 1. After two taps, value becomes 2, and the UI updates automatically.

3. Final Answer:

   Count: 2 -> Option B

4. Quick Check:

   2 increments update value to 2 [OK]

Hint: Each button tap adds 1; count updates automatically [OK]

Common Mistakes:

• Forgetting @Published triggers UI update
• Assuming @StateObject resets value
• Counting taps incorrectly

4. Identify the error in this SwiftUI code snippet:

class Model: ObservableObject {
    @Published var text: String
    init() {}
}

struct ViewContent: View {
    @StateObject var model = Model()
    var body: some View {
        Text(model.text)
    }
}

medium

A. Missing initial value for @Published property 'text' in Model

B. Cannot use @StateObject with ObservableObject classes

C. Text view cannot display a String property

D. Model class should be a struct

Solution

1. Step 1: Check property initialization

   The @Published property text is declared but not initialized, and the init() is empty.

2. Step 2: Understand Swift requirement for properties

   All non-optional properties must have an initial value or be initialized in the constructor. Here, text lacks both.

3. Final Answer:

   Missing initial value for @Published property 'text' in Model -> Option A

4. Quick Check:

   Uninitialized property causes error = A [OK]

Hint: Always initialize @Published properties or provide init values [OK]

Common Mistakes:

• Assuming @StateObject can't be used with ObservableObject
• Thinking Text can't display String
• Believing Model must be a struct

5. You want to create a SwiftUI app where a view shows a user's name that can be edited in a separate view. Which combination of property wrappers should you use to ensure the UI updates correctly when the name changes?

hard

A. Use @State in the main view and @Published in a shared ObservableObject class

B. Use @Published in both views

C. Use @State in both views

D. Use @StateObject in the editing view only

Solution

1. Step 1: Understand data sharing between views

   When multiple views need to share and update data, use an ObservableObject class with @Published properties.

2. Step 2: Use @State for local view data and @Published for shared data

   The main view can use @State for local state, but the shared user name should be in a class marked with @Published to notify changes.

3. Final Answer:

   Use @State in the main view and @Published in a shared ObservableObject class -> Option A

4. Quick Check:

   Shared data uses @Published; local uses @State [OK]

Hint: Shared data needs @Published; local view data uses @State [OK]

Common Mistakes:

• Using @State only for shared data
• Using @Published in structs or views directly
• Not using ObservableObject for shared data