Sheet and fullScreenCover in iOS Swift

Introduction

Sheets and fullScreenCovers let you show new screens on top of the current one. They help you focus on a task without leaving the main screen.

When you want to show a quick form or settings without leaving the current screen.

When you need to display details or extra information temporarily.

When you want to present a full screen experience, like a photo viewer or onboarding.

When you want the user to complete a task and then return to the main screen.

When you want to keep the main screen visible but dimmed behind a smaller popup.

Syntax

iOS Swift

/* Showing a sheet */
.sheet(isPresented: $showSheet) {
    ContentView()
}

/* Showing a full screen cover */
.fullScreenCover(isPresented: $showFullScreen) {
    ContentView()
}

Use .sheet for a partial screen popup that can be dismissed by swiping down.

Use .fullScreenCover for a full screen modal that covers everything and usually requires an explicit close action.

Examples

This example shows a button that opens a sheet with some text.

iOS Swift

struct ContentView: View {
  @State private var showSheet = false

  var body: some View {
    Button("Show Sheet") {
      showSheet = true
    }
    .sheet(isPresented: $showSheet) {
      Text("This is a sheet")
    }
  }
}

This example shows a button that opens a full screen cover with a close button.

iOS Swift

struct ContentView: View {
  @State private var showFullScreen = false

  var body: some View {
    Button("Show Full Screen") {
      showFullScreen = true
    }
    .fullScreenCover(isPresented: $showFullScreen) {
      VStack {
        Text("Full Screen Cover")
        Button("Close") {
          showFullScreen = false
        }
      }
    }
  }
}

Sample App

This app shows two buttons. One opens a sheet with a message and a dismiss button. The other opens a full screen cover with a similar message and dismiss button. You can try both to see the difference in how they appear.

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var showSheet = false
  @State private var showFullScreen = false

  var body: some View {
    VStack(spacing: 20) {
      Button("Open Sheet") {
        showSheet = true
      }
      .sheet(isPresented: $showSheet) {
        VStack {
          Text("Hello from Sheet!")
            .font(.title)
          Button("Dismiss") {
            showSheet = false
          }
        }
        .padding()
      }

      Button("Open Full Screen") {
        showFullScreen = true
      }
      .fullScreenCover(isPresented: $showFullScreen) {
        VStack {
          Text("Hello from Full Screen Cover!")
            .font(.title)
          Button("Dismiss") {
            showFullScreen = false
          }
        }
        .padding()
      }
    }
    .padding()
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

Sheets can be dismissed by swiping down, but fullScreenCovers usually require a button to close.

Use sheets for quick tasks and fullScreenCovers for immersive experiences.

Remember to bind the isPresented state to control showing and hiding.

Summary

Sheets show a partial screen popup that can be swiped down to dismiss.

fullScreenCover shows a full screen modal that covers everything and needs a close action.

Use them to present temporary screens without navigating away.