WWDC24 SALE: Save 50% on all my Swift books and bundles! >>

Using alert() and sheet() with optionals

Paul Hudson    @twostraws   

SwiftUI has two ways of creating alerts and sheets, and so far we’ve mostly only used one: a binding to a Boolean that shows the alert or sheet when the Boolean becomes true.

The second option allows us to bind an optional to the alert or sheet. The key is to use an optional Identifiable object as the condition for showing the sheet, and the closure hands you the non-optional value that was used for the condition, so you can use it safely.

To demonstrate this, we could create a trivial User struct that conforms to the Identifiable protocol:

struct User: Identifiable {
    var id = "Taylor Swift"

We could then create a property inside ContentView that tracks which user is selected, set to nil by default:

@State private var selectedUser: User? = nil

Now we can change the body of ContentView so that it sets selectedUser to a value when a button is tapped, then displays a sheet when selectedUser is given a value:

Button("Tap Me") {
    selectedUser = User()
.sheet(item: $selectedUser) { user in

With that simple code, whenever you tap “Tap Me” a sheet saying “Taylor Swift” appears. As soon as the sheet is dismissed, SwiftUI sets selectedUser back to nil.

Alerts have similar functionality, although you need to pass both the Boolean and optional Identifiable value at the same time. This allows you to show the alert when needed, but also benefit from the same optional unwrapping behavior we have with sheets.

First, add a Boolean property to watch:

@State private var isShowingUser = false

Then toggle that Boolean in your button's action:

isShowingUser = true

And finally change your sheet() modifier for this:

.alert("Welcome", isPresented: $isShowingUser, presenting: selectedUser) { user in
    Button(user.id) { }

With that covered, you now know practically all there is to know about sheets and alerts, but there is one last thing I want to sneak in to round out your knowledge.

When we're presenting a sheet, we can add presentation detents to make the sheet take up less than the full screen space. This is done using the presentationDetents() modifier, which accepts a set of sizes to use for the sheet.

For example, we could specify medium and large sizes like this:

    .presentationDetents([.medium, .large])

Because we're specifying two sizes here, the initial size will be used when the sheet is first shown, but iOS will show a little grab handle that lets users pull the sheet up to full size.

Save 50% in my WWDC sale.

SAVE 50% To celebrate WWDC24, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.6/5

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.