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.

Practice

1. What is the main difference between sheet and fullScreenCover in SwiftUI?

easy

A. sheet shows a partial screen popup, fullScreenCover covers the entire screen.

B. sheet covers the entire screen, fullScreenCover shows a partial popup.

C. Both behave the same and can be dismissed by swiping down.

D. sheet is used only for navigation, fullScreenCover is for alerts.

Solution

1. Step 1: Understand sheet behavior

   sheet presents a view that covers part of the screen and can be dismissed by swiping down.

2. Step 2: Understand fullScreenCover behavior

   fullScreenCover presents a view that covers the entire screen and usually requires a close button to dismiss.

3. Final Answer:

   sheet shows a partial screen popup, fullScreenCover covers the entire screen. -> Option A

4. Quick Check:

   Partial vs full screen = A [OK]

Hint: Remember: sheet is partial, fullScreenCover is full screen [OK]

Common Mistakes:

• Confusing which one covers full screen
• Thinking both can be dismissed by swipe
• Assuming fullScreenCover is for alerts only

2. Which of the following is the correct syntax to present a sheet in SwiftUI?

easy

A. .fullScreenCover(showModal) { Text("Hello") }

B. .sheet(isPresented: $showModal) { Text("Hello") }

C. .sheet(showModal) { Text("Hello") }

D. .fullScreenCover(isPresented: showModal) { Text("Hello") }

Solution

1. Step 1: Check correct parameter usage

   The sheet modifier requires a binding boolean with isPresented: to control showing.

2. Step 2: Validate closure syntax

   The closure provides the view to present, here Text("Hello").

3. Final Answer:

   .sheet(isPresented: $showModal) { Text("Hello") } -> Option B

4. Quick Check:

   Correct syntax uses isPresented with $ binding [OK]

Hint: Use .sheet(isPresented: $var) { View } for sheets [OK]

Common Mistakes:

• Omitting $ for binding variable
• Using wrong parameter name
• Confusing sheet and fullScreenCover syntax

3. Given this SwiftUI code snippet, what will happen when the button is tapped?

struct ContentView: View {
  @State private var showSheet = false
  var body: some View {
    Button("Show") {
      showSheet = true
    }
    .sheet(isPresented: $showSheet) {
      Text("Sheet Content")
    }
  }
}

medium

A. A partial sheet appears with "Sheet Content" that can be swiped down to dismiss.

B. Nothing happens because showSheet is not bound correctly.

C. A full screen modal appears with "Sheet Content".

D. The app crashes due to missing dismiss button.

Solution

1. Step 1: Identify the modifier used

   The code uses .sheet(isPresented: $showSheet), which shows a partial sheet.

2. Step 2: Understand the button action

   When tapped, showSheet becomes true, triggering the sheet to appear with the text.

3. Final Answer:

   A partial sheet appears with "Sheet Content" that can be swiped down to dismiss. -> Option A

4. Quick Check:

   Button sets showSheet true, sheet appears partially [OK]

Hint: sheet with isPresented true shows partial popup [OK]

Common Mistakes:

• Thinking sheet covers full screen
• Assuming dismiss button is mandatory
• Confusing binding syntax

4. Identify the error in this SwiftUI code that tries to present a full screen cover:

struct ContentView: View {
  @State var showFullScreen = false
  var body: some View {
    Button("Open") {
      showFullScreen = true
    }
    .fullScreenCover(isPresented: showFullScreen) {
      Text("Full Screen")
    }
  }
}

medium

A. State variable must be private.

B. fullScreenCover cannot be used with Text views.

C. Missing $ before showFullScreen in isPresented binding.

D. Button label must be a View, not a String.

Solution

1. Step 1: Check isPresented parameter

   The isPresented parameter requires a binding, so it must be $showFullScreen, not showFullScreen.

2. Step 2: Confirm other code parts

   Using Text inside fullScreenCover is valid, and Button label can be a String.

3. Final Answer:

   Missing $ before showFullScreen in isPresented binding. -> Option C

4. Quick Check:

   Binding needs $ prefix [OK]

Hint: Use $ for binding variables in isPresented [OK]

Common Mistakes:

• Forgetting $ for binding
• Thinking fullScreenCover needs complex views
• Assuming Button label can't be String

5. You want to present a full screen modal that shows user profile details and requires a close button to dismiss. Which SwiftUI code snippet correctly implements this behavior?

hard

A. Use .sheet(showProfile) { ProfileView() } and rely on swipe to dismiss.

B. Use .sheet(isPresented: $showProfile) { ProfileView() } with a close button inside ProfileView.

C. Use .fullScreenCover(showProfile) { ProfileView() } without a close button.

D. Use .fullScreenCover(isPresented: $showProfile) { ProfileView() } and add a close button inside ProfileView that sets showProfile = false.

Solution

1. Step 1: Choose correct presentation style

   A full screen modal requires fullScreenCover, not sheet.

2. Step 2: Implement dismissal method

   Since fullScreenCover does not support swipe to dismiss, a close button inside ProfileView must set showProfile = false.

3. Final Answer:

   Use .fullScreenCover(isPresented: $showProfile) { ProfileView() } and add a close button inside ProfileView that sets showProfile = false. -> Option D

4. Quick Check:

   Full screen + manual close button = A [OK]

Hint: Full screen modals need manual close button inside view [OK]

Common Mistakes:

• Using sheet for full screen modal
• Omitting $ in binding
• Relying on swipe to dismiss fullScreenCover