Present a new view using sheet in SwiftUI

In this tutorial, we will see how to present a new view using a sheet in SwiftUI.

We all have a basic idea about the sheet. A sheet is a way to present a modal view over our existing view. It is commonly used for presenting temporary or transient views, such as a settings screen, a user profile editor, or any other supplementary content.

We can simply present a new view using a sheet by specifying the view with a closure that we want to present within the sheet modifier.

Now, follow the steps below to achieve this task.

Create main view (ContentView)

First of all, within the ContentView I will create a button and apply the sheet modifier on the button to show the sheet on the button tap. I will then specify the sheet content within the sheet modifier.

Here the sheet content will be a new view that we want to present using the sheet.

Example

import SwiftUI

struct ContentView: View {
    
    // @State creates a mutable state variable within the view
    @State private var showingSettings = false
    
    var body: some View {
        
        // Button with the label "Show Settings"
        Button("Show Settings") {
            // When the button is tapped, set showingSettings to true
            showingSettings = true
        }
        .sheet(isPresented: $showingSettings) {
            
            // Specify the view to be presented using a closure
        }
    }
}

In the above program, I have created a @State property called showingSettings, it is a mutable state variable that will control the visibility of the sheet.

Then, I have created a button with the label “Show Settings“, when we tap this button the closure inside the button will execute, setting showingSettings to true.

The isPresented is bound to the showingSettings state variable to present the sheet based on the boolean value of the state property. If the variable showingSettings is true, the sheet will appear. If it’s false, the sheet will disappear.

Now, within the sheet modifier, we can specify the view with a closure to present that view using the sheet.

Create another view (SettingsView)

Now, I will create another view called SettingsView, inside this view, I will create a simple Text view that will show a simple message when the sheet appears.

Then, I will specify this view within the sheet modifier with a closure.

Example

struct SettingsView: View {
    
    var body: some View {
        
        // Display a simple Text view with the message
        Text("This is the Settings view")
    }
}

The above code will display a simple message “This is the Settings view” when the sheet appears.

Now have a look at the complete code below.

import SwiftUI

struct ContentView: View {
    
    // @State creates a mutable state variable within the view
    @State private var showingSettings = false
    
    var body: some View {
        
        // Button with the label "Show Settings"
        Button("Show Settings") {
            // When the button is tapped, set showingSettings to true
            showingSettings = true
        }
        .sheet(isPresented: $showingSettings) {
            
            // Specify the view to be presented using a closure
            SettingsView()
        }
    }
}

// Define another SwiftUI view
struct SettingsView: View {
    
    var body: some View {
        
        // Display a simple Text view with the message
        Text("This is the Settings view")
    }
}

As you can see in the above program, I have specified the SettingsView with closure within the sheet modifier. When the sheet appears it will display the content of the SettingsView.

Output:

Dismiss the sheet

We can simply dismiss the sheet by swiping down the sheet in SwiftUI, but if you don’t like that then you can add a button in SettingsView to dismiss the sheet.

This example is for iOS 15 and above.

Example

struct SettingsView: View {
    // Environment variable to access the dismiss action
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack {
            Text("This is the Settings view")
            
            // Button to dismiss the sheet when tapped
            Button("Dismiss") {
                // Call dismiss() to dismiss the sheet
                dismiss()
            }
            .padding()
        }
    }
}

In the above code, I have used the @Environment(\.dismiss) in SettingsView to access the environment value for dismissing the current view.

Then, I called the dismiss() function when the “Dismiss” button is tapped, which will dismiss the settings view.

Output:

For iOS versions 14 and below we can use the presentationMode environment value to dismiss the sheet.

Example

struct SettingsView: View {
    // Environment variable to access the presentation mode for dismissing the view
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("This is the Settings view")

            // Button to dismiss the view using the presentation mode
            Button("Dismiss") {
                // Call the dismiss method on the wrappedValue of presentationMode to dismiss the view
                presentationMode.wrappedValue.dismiss()
            }
            .padding()
        }
    }
}