Start Trips, and build its first view in the canvas

Open the starter

Trips is the app you will build for the rest of this course. It begins as a little app you download: a new project, as lesson 1 made one, with a first screen of its own. From the next lesson on, it grows from lesson to lesson.

1. Download Trips-starter.zip, this lesson's starting point. Double-click it in Finder to unzip it, then double-click Trips.xcodeproj to open it in Xcode.

2. Run it before changing anything. In the toolbar, open the run destination menu and pick an iPhone simulator — iPhone 17, for example. Choose Product ▸ Run (⌘R). Device Hub opens with the app:

   

That is the last you will see of the simulator until step 12. Stop the app (Product ▸ Stop, ⌘.).

Meet the canvas

1. Click ContentView.swift in the Project navigator. Beside the code is the canvas. If it is not showing, click Show Canvas in the upper-right corner of the window's toolbar, or press ⌥⌘↩.

2. If the canvas says that it is paused, click its Restart button. After a moment it shows the screen that the simulator showed. This time nothing was launched by you: the canvas drew it from the code.

3. Now change the code, and do not build or run. In the last Text, replace Where to next? with Pick a city. Pack a bag.:

   In ContentView.swift, replace the ContentView struct with this

   Hide changesCopy

   struct ContentView: View {    var body: some View {        ZStack {            LinearGradient(colors: [.cyan.opacity(0.35), .indigo.opacity(0.3)], startPoint: .top, endPoint: .bottom)                .ignoresSafeArea()            VStack(spacing: 14) {                Image(systemName: "airplane.departure")                    .font(.system(size: 56))                    .foregroundStyle(.white)                    .padding(30)                    .background(.indigo.gradient, in: .circle)                Text("Trips")                    .font(.largeTitle.bold())                Text("Where to next?")                Text("Pick a city. Pack a bag.")                    .foregroundStyle(.secondary)            }        }    }}

   struct ContentView: View {
       var body: some View {
           ZStack {
               LinearGradient(colors: [.cyan.opacity(0.35), .indigo.opacity(0.3)], startPoint: .top, endPoint: .bottom)
                   .ignoresSafeArea()
               VStack(spacing: 14) {
                   Image(systemName: "airplane.departure")
                       .font(.system(size: 56))
                       .foregroundStyle(.white)
                       .padding(30)
                       .background(.indigo.gradient, in: .circle)
                   Text("Trips")
                       .font(.largeTitle.bold())
                   Text("Pick a city. Pack a bag.")
                       .foregroundStyle(.secondary)
               }
           }
       }
   }

   

What the canvas shows is decided by the four lines at the bottom of the file:

#Preview {
    ContentView()
}

#Preview is a macro: code that writes code while your app is compiled. It is the freestanding kind, written with a #, and lesson 12 takes one apart. Its braces hold the code that makes the view to show. Xcode finds every #Preview in the file you are editing and draws it. A preview is only for you: it has no effect on what the app does when it runs.

Sample data first

A preview can only show a view that it is able to create. So before the view, make the data that a preview will create it from. Choose File ▸ New ▸ File from Template… (⌘N), select Swift File under Source, and name it Trip. Then add the model:

struct Trip: Identifiable {
    let id: Int
    var city: String
    var country: String
    var nights: Int
    var isFavorite: Bool
}

And a few values of it, as static constants on the type itself:

extension Trip {
    static let seattle = Trip(id: 1, city: "Seattle", country: "United States",
                              nights: 5, isFavorite: true)
    static let vancouver = Trip(id: 2, city: "Vancouver", country: "Canada",
                                nights: 3, isFavorite: false)
    static let atacama = Trip(id: 3, city: "San Pedro de Atacama", country: "Chile",
                              nights: 12, isFavorite: true)

    static let samples = [seattle, vancouver, atacama]
}

Because they are static members of Trip, anything that expects a Trip can be given one as .seattle. The third sample is there on purpose: a long name and a two-digit number, to see what they do to a layout.

A view of its own

1. Choose File ▸ New ▸ File from Template… (⌘N) again. This time, under User Interface, select SwiftUI View. Click Next, name it TripCard, and click Create.

2. Xcode writes a view and a preview of it:

   New fileTripCard.swift, as Xcode made it

   Copy

   import SwiftUI
   
   struct TripCard: View {
       var body: some View {
           Text("Hello, World!")
       }
   }
   
   #Preview {
       TripCard()
   }

   

The canvas now shows this file's preview, not the app's first screen. That is the point of it: you look at one view, alone, without making your way to it through the app.

Give the card a trip

The card should show a trip that it is given. Add a property, and show the city:

struct TripCard: View {    let trip: Trip    var body: some View {        Text("Hello, World!")        Text(trip.city)    }}

struct TripCard: View {
    let trip: Trip

    var body: some View {
        Text(trip.city)
    }
}

The canvas stops, and Xcode reports an error — not in the view, but in the preview below it

missing argument for parameter 'trip' in call

A preview is code. It is compiled together with the rest of the app, so when a view's initializer changes, the preview has to change with it. Give the preview a trip to show, and a name while you are there:

#Preview {    TripCard()#Preview("Favorite") {    TripCard(trip: .seattle)}

#Preview("Favorite") {
    TripCard(trip: .seattle)
}

.seattle is the sample from step 3. This is the pattern for every view from here on: the view is given what it shows, and its previews give it sample data. A view that fetched its own trip from a server could not be previewed like this.

Build it up, watching the canvas

Now make it a card, a few lines at a time. Keep an eye on the canvas after each change. First the country, under the city:

struct TripCard: View {    let trip: Trip    var body: some View {        Text(trip.city)        VStack(alignment: .leading) {            Text(trip.city)                .font(.headline)            Text(trip.country)                .foregroundStyle(.secondary)        }    }}

struct TripCard: View {
    let trip: Trip

    var body: some View {
        VStack(alignment: .leading) {
            Text(trip.city)
                .font(.headline)
            Text(trip.country)
                .foregroundStyle(.secondary)
        }
    }
}

Then the nights and the star at the right, some space inside, and a background:

struct TripCard: View {    let trip: Trip    var body: some View {        VStack(alignment: .leading) {            Text(trip.city)                .font(.headline)            Text(trip.country)                .foregroundStyle(.secondary)        HStack {            VStack(alignment: .leading) {                Text(trip.city)                    .font(.headline)                Text(trip.country)                    .foregroundStyle(.secondary)            }            Spacer()            Text("\(trip.nights) nights")            if trip.isFavorite {                Image(systemName: "star.fill")                    .foregroundStyle(.yellow)            }        }        .padding()        .background(.quaternary, in: RoundedRectangle(cornerRadius: 12))        .padding(.horizontal)    }}

struct TripCard: View {
    let trip: Trip

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text(trip.city)
                    .font(.headline)
                Text(trip.country)
                    .foregroundStyle(.secondary)
            }
            Spacer()
            Text("\(trip.nights) nights")
            if trip.isFavorite {
                Image(systemName: "star.fill")
                    .foregroundStyle(.yellow)
            }
        }
        .padding()
        .background(.quaternary, in: RoundedRectangle(cornerRadius: 12))
        .padding(.horizontal)
    }
}

Do not worry yet about why each line does what it does. VStack, HStack and Spacer are lesson 9. .font, .foregroundStyle and the SF Symbol in Image(systemName:) are lesson 8. The modifiers at the end, and why their order matters, are lesson 11. Here the point is the way of working: type a line, look at the canvas.

One piece you do know. if trip.isFavorite { … } in the middle of the block is the if you gave your own builder on lesson 4.

A preview for every state

The canvas shows a favorite trip with a short name. A card has other states, and each deserves a look. Add two more previews at the bottom of TripCard.swift:

#Preview("Not a favorite") {
    TripCard(trip: .vancouver)
}

#Preview("Long name") {
    TripCard(trip: .atacama)
}

Each #Preview becomes a tab at the top of the canvas, labelled with the name you gave it. Click through them:

In UIKit, checking these three states meant three runs, or a debug menu. Here they are three tabs, and they stay in the file as a record of what the view is supposed to handle.

Dark mode and large text, from the canvas

The canvas can also change the conditions a view is shown under, without any code. The controls are along its bottom edge.

1. Click the Long name tab.

2. Click Device Settings, in the lower-right corner of the canvas.

3. Switch Color Scheme on and select Dark Appearance.

4. Switch Dynamic Type on, and move the Dynamic Type slider all the way to the right — the largest of the accessibility text sizes.

   

The dark appearance needed nothing from you: .secondary and .quaternary are colors that adapt. The text size is another matter. The name is squeezed into a narrow column and broken across five lines, and the word “nights” is split in two. You have found a real layout bug, and you found it without running the app. It is fixed in lesson 9, when you know how; leave it for now.

Switch both settings off again. Two more controls are worth a click. Variant, in the lower-left corner, shows one preview in every text size at once (Dynamic Type Variants), or light and dark side by side (Color Scheme Variants). And Selectable, beside it, lets you click a part of the picture to find the code that drew it.

A condition that you want to keep can be written into a preview instead:

#Preview("Dark, largest text") {
    TripCard(trip: .atacama)
        .preferredColorScheme(.dark)
        .dynamicTypeSize(.accessibility5)
}

That tab shows the same picture as above, every time, with no settings to remember.

A view that changes: @Previewable

Every preview so far showed a view that only displays. Now a view that the user changes: a star that can be tapped. Make another file from the SwiftUI View template, named FavoriteButton, and replace its struct:

struct FavoriteButton: View {    @Binding var isFavorite: Bool    var body: some View {        Text("Hello, World!")        Button("Favorite", systemImage: isFavorite ? "star.fill" : "star") {            isFavorite.toggle()        }        .labelStyle(.iconOnly)        .font(.largeTitle)    }}

struct FavoriteButton: View {
    @Binding var isFavorite: Bool

    var body: some View {
        Button("Favorite", systemImage: isFavorite ? "star.fill" : "star") {
            isFavorite.toggle()
        }
        .labelStyle(.iconOnly)
        .font(.largeTitle)
    }
}

The button does not own the value it changes. @Binding says: someone else owns this Bool; I have been given the means to read and write it. It is the Ref you built on lesson 2. So to preview the button, the preview has to own a Bool and hand over a binding to it:

#Preview {    FavoriteButton()    @Previewable @State var isFavorite = false    FavoriteButton(isFavorite: $isFavorite)}

#Preview {
    @Previewable @State var isFavorite = false

    FavoriteButton(isFavorite: $isFavorite)
}

The canvas is live: its previews respond to clicks as the app would to taps. Click the star.

@State gives the preview a value that can change, and $isFavorite hands the button a binding to it — the $ you built on lesson 2. @Previewable is what allows a @State inside a preview. Leave it out and the code still compiles, with a warning that it will not work; that is one of this lesson's flash cards.

Many previews from one line

Three trips needed three previews. Xcode 27 can make them from a list. Add this to TripCard.swift:

#Preview("All samples", arguments: Trip.samples) { trip in
    TripCard(trip: trip)
}

The canvas shows the All samples tab as a grid: one preview of the card for each trip in Trip.samples. Click one of them to open it on its own. When you add a fourth sample, it appears in the grid without another line of preview code.

#Playground: try code that is not a view

On lessons 2 to 4 you tried code out by running the app and reading the console. For code that draws nothing there is a quicker way, in the same canvas. Go to Trip.swift.

import Foundationimport Playgroundsstruct Trip: Identifiable {    let id: Int    var city: String    var country: String    var nights: Int    var isFavorite: Bool}extension Trip {    static let seattle = Trip(id: 1, city: "Seattle", country: "United States",                              nights: 5, isFavorite: true)    static let vancouver = Trip(id: 2, city: "Vancouver", country: "Canada",                                nights: 3, isFavorite: false)    static let atacama = Trip(id: 3, city: "San Pedro de Atacama", country: "Chile",                              nights: 12, isFavorite: true)    static let samples = [seattle, vancouver, atacama]}#Playground {    let nights = Trip.samples.map(\.nights)    let total = nights.reduce(0, +)    let longest = Trip.samples.max { $0.nights < $1.nights }    print("\(total) nights in all. The longest stay is in \(longest?.city ?? "nowhere").")}

import Foundation
import Playgrounds

struct Trip: Identifiable {
    let id: Int
    var city: String
    var country: String
    var nights: Int
    var isFavorite: Bool
}

extension Trip {
    static let seattle = Trip(id: 1, city: "Seattle", country: "United States",
                              nights: 5, isFavorite: true)
    static let vancouver = Trip(id: 2, city: "Vancouver", country: "Canada",
                                nights: 3, isFavorite: false)
    static let atacama = Trip(id: 3, city: "San Pedro de Atacama", country: "Chile",
                              nights: 12, isFavorite: true)

    static let samples = [seattle, vancouver, atacama]
}

#Playground {
    let nights = Trip.samples.map(\.nights)
    let total = nights.reduce(0, +)
    let longest = Trip.samples.max { $0.nights < $1.nights }
    print("\(total) nights in all. The longest stay is in \(longest?.city ?? "nowhere").")
}

The canvas gets a new tab, marked with a beaker instead of an eye. It runs the code in the braces and shows the result of each line under it: the array of nights, the total, the longest trip, and the line that print wrote. Change a number in the samples and the results change. Nothing in a #Playground runs when the app runs.

On the screen, and in the simulator at last

The card is finished without ever having been part of the app. Put it there. In ContentView.swift, show a card for each sample:

struct ContentView: View {    var body: some View {        ZStack {            LinearGradient(colors: [.cyan.opacity(0.35), .indigo.opacity(0.3)], startPoint: .top, endPoint: .bottom)                .ignoresSafeArea()            VStack(spacing: 14) {                Image(systemName: "airplane.departure")                    .font(.system(size: 56))                    .foregroundStyle(.white)                    .padding(30)                    .background(.indigo.gradient, in: .circle)                Text("Trips")                    .font(.largeTitle.bold())                Text("Pick a city. Pack a bag.")                    .foregroundStyle(.secondary)        ScrollView {            VStack {                ForEach(Trip.samples) { trip in                    TripCard(trip: trip)                }            }        }    }}

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(Trip.samples) { trip in
                    TripCard(trip: trip)
                }
            }
        }
    }
}

The canvas for ContentView.swift shows the three cards. ForEach is the one you used on lesson 4; it needs no id: here, because Trip is Identifiable. Now, for the first time since step 1, run the app:

Run it (⌘R). The simulator shows

It is exactly what the canvas showed. That is the whole method, and the rest of the course uses it: build a view in the canvas from sample data, give it a preview for each state, and run the app when you want to see the pieces together.