Chapters
Chapters

Chapters

Hide chapters

macOS Apprentice

Third Edition · macOS 26 · Swift 6 · Xcode 26

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Getting Started

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Building With SwiftUI

Section 2: 6 chapters
Show chapters Hide chapters

Section III: Building With AppKit

Section 3: 6 chapters
Show chapters Hide chapters

Section IV: Combining SwiftUI & AppKit

Section 4: 3 chapters
Show chapters Hide chapters

7. Data Flow in SwiftUI
Written by Sarah Reichelt

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the last chapter, you created a Game data model and used it to make the Snowman game playable. You imported a data file for generating random words, and you connected the data to all the components of the game view.

In this chapter, you’ll extend your data to include the entire app. This uses a new data object that holds a list of games as well as other data your app needs.

You’ll learn how do set up data classes and their properties and how to pass this data around to the views.

This involves several more property wrappers, so hover your finger over the @ key and get ready.

Creating an App Model

Start Xcode and open your project from the previous chapter, or use the starter project from the downloaded materials for this chapter. Press Command-R to run the app to remind yourself of where you ended:

The starter app
The starter app

The game view is complete, the game is playable and the Game model is functional. The sidebar still only displays placeholder text, so that’s what you’ll add next.

You’ll create a new model class to hold a list of games and the data needed to swap between them.

Select the Models folder in the Project navigator and press Command-N to make a new file. Choose macOS ▸ Source ▸ Swift File and name it AppState.swift.

Your previous models have been structures or enumerations, but this one has to be a class. When you learned about classes and structures, you found that classes are reference types and structures are value types. SwiftUI has definite rules about places where you must use reference types, and you’re about to encounter one.

Replace the contents of the new file with:

// 1
import SwiftUI

// 2
@Observable
class AppState {

}

What does this do?

  1. Start by importing the SwiftUI library. You don’t need it yet, but you will. Importing SwiftUI automatically imports Foundation, which is why you can replace the default import.
  2. This model is a class called AppState and it conforms to Observable.

Observable

So what is the Observable protocol? A class that conforms to Observable is a class that publishes changes to its properties. This is commonly used in SwiftUI to indicate that data has changed and to trigger an update of the views.

// 1
var games: [Game]
// 2
var gameIndex: Int
// 3
var selectedID: Int?

// 4
init() {
  // 5
  let newGame = Game()
  games = [newGame]

  // 6
  gameIndex = 0
  selectedID = 1
}

Identifying the Game

When you defined the Letter structure, you made it Identifiable so SwiftUI could loop through it using ForEach with a way of distinguishing each letter.

let id: Int

struct Game: Identifiable {

// 1
init(id: Int) {
  // 2
  self.id = id
  // 2
  word = getRandomWord()
}
Build errors
Taefm uhqeyr

Game(id: 1)

Adding a State Property

You defined an Observable class, but you haven’t used it yet. This class defines app-wide settings, so you’ll add it to the app itself.

@State var appState = AppState()

Environment Objects

Now that your app has its appState, you can pass it around to the other views. There are two ways to do this, and you’ll learn both. The first one uses @Environment.

.environment(appState)

// 1
@Environment(AppState.self) var appState

// 2
var game: Game {
  appState.games[appState.gameIndex]
}

@Bindable var appStateBindable = appState

GuessesView(game: $appStateBindable.games[appState.gameIndex])

.environment(AppState())
Running the game with the Environment object.
Gidzizb kcu pepu halb mya Immemuggeqb ascasz.

Starting a New Game

Next, you need to give AppState a way to create a new game.

// 1
func startNewGame() {
  // 2
  let newGame = Game(id: games.count + 1)
  // 3
  games.append(newGame)

  // 4
  selectedID = newGame.id
  gameIndex = games.count - 1
}

appState.startNewGame()
New game
Qin qito

Populating the Sidebar

Finally, you’re ready to start work on the sidebar, so open SidebarView.swift. As with GameView, you need to give the preview access to an @Environment object so it can use its data.

.environment(AppState())

// 1
@Environment(AppState.self) var appState

// 2
var body: some View {
  // 3
  List(appState.games) { game in
    // 4
    VStack(alignment: .leading) {
      // 5
      Text("Game \(game.id)")
        .font(.title3)
      Text(game.word)
    }
    // 6
    .padding(.vertical)
  }
}
Testing the sidebar.
Kixjarn cre xunokut.

Getting Data for the Sidebar

Right now, the sidebar shows the game header and the word, but you only want the word to appear if the game is over.

// 1
var sidebarWord: String {
  // 2
  if gameStatus == .inProgress {
    return "???"
  }
  // 3
  return word
}

Text(game.sidebarWord)
Hiding the current word in the sidebar.
Nukacv mle qenvaqt qaxc em wra lezoron.

Computing Properties

Open GameStatus.swift and start by adding this import at the top:

import SwiftUI

// 1
var displayStatus: Text {
  // 2
  switch self {
  case .inProgress:
    // 3
    return Text("In progress…")
  case .lost:
    // 4
    let img = Image(systemName: "person.fill.turn.down")
    return Text("You lost \(img)")
  case .won:
    // 5
    let img = Image(systemName: "heart.circle")
    return Text("You won! \(img)")
  }
}
Searching the symbols library.
Wueclsimm pjo flnnaxg jumhilj.

game.gameStatus.displayStatus

Adding Color

Again, GameStatus is the place to do this, so open GameStatus.swift and add this:

var statusTextColor: Color {
  switch self {
  case .inProgress:
    return .primary
  case .won:
    return .green
  case .lost:
    return .orange
  }
}

.foregroundStyle(game.gameStatus.statusTextColor)
Coloring the sidebar
Bojafagb fco vixefaq

.foregroundStyle(game.gameStatus.statusTextColor)
Environment Overrides
Utwuwuvgodr Iwadsuvir

Making the Sidebar Live

A List can have a selection parameter. This is an optional value that changes when the user selects or deselects a list item. You already created the optional selectedID property in AppState for this purpose.

// 1
@Bindable var appStateBindable = appState

// 2
List(appState.games, selection: $appStateBindable.selectedID) { game in

func selectGame(id: Int?) {
  // 1
  guard let id else {
    return
  }

  // 2
  let gameLocation = games.firstIndex { game in
    game.id == id
  }
  if let gameLocation {
    gameIndex = gameLocation
  }
}

// 1
var selectedID: Int? {
  // 2
  didSet {
    // 3
    selectGame(id: selectedID)
  }
}
Selecting games from the sidebar.
Rurulpacq lulez kqiq dgo dadehic.

var statusTextColor: Color {
  switch self {
  case .inProgress:
    return .primary
  case .won:
    return .green.mix(with: .white, by: 0.1)      // CHANGED
  case .lost:
    return .orange.mix(with: .white, by: 0.1)     // CHANGED
  }
}
New status colors.
Jeh ldodad vexuff.

Using Array Methods

You’ve seen several uses of array methods like filter and firstIndex. They loop through arrays, but the way they operate can be confusing.

// 1
let names = [ "Alice", "Ben", "Celine", "Danny", "Edith" ]

// 2
var fiveLetterNames: [String] = []
// 3
for name in names {
  // 4
  if name.count == 5 {
    fiveLetterNames.append(name)
  }
}

// 1
let filteredNames = names.filter { name in
  // 2
  name.count == 5
}

// 1
func countEqualsFive(string: String) -> Bool {
  string.count == 5
}
// 2
let filteredNames2 = names.filter(countEqualsFive)

let filteredNames3 = names.filter({ name in
  name.count == 5
})

let filteredNames4 = names.filter {
  $0.count == 5
}

Fixing the Focus

To discover the problem, complete one game and start a new one. Next, use the sidebar to get back to your first game and click the New Game button. Your sidebar shows two games in progress.

.onChange(of: game.gameStatus) {

.onChange(of: game.id) {

Observing Properties

Earlier in this chapter, you created a @State object and used the environment modifier to pass it around. But there’s another way to use this @State object to send data to the subviews.

ContentView(appState: appState)

let appState: AppState

ContentView(appState: AppState())

@Bindable var appState: AppState

List(appState.games, selection: $appState.selectedID) { game in

SidebarView(appState: AppState())

@Bindable var appState: AppState

GuessesView(game: $appState.games[appState.gameIndex])

GameView(appState: AppState())
Observed objects build errors
Eymorviz azjanpq jiihb omroqv

NavigationSplitView {
  SidebarView(appState: appState)
} detail: {
  GameView(appState: appState)
}

Key Points

  • @Observable is a protocol for classes that publishes changes to their properties.
  • The view that owns the Observable declares it using @State.
  • Subviews can access this object using @Environment, let, var or @Bindable.
  • Lists can display a selectable array of SwiftUI views.
  • Understanding data flow is crucial to working in SwiftUI.

Where to Go From Here?

You’ve learned a common SwiftUI pattern with a structure for individual data elements and a class to collect them together and pass them round the app.

6. Getting Data Into Your App
8. Showing Other Windows
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now