Sheet and fullScreenCover in iOS Swift - Mini App: Build & Ship

Build: Sheet and FullScreenCover Demo

This screen shows how to open a sheet and a full screen cover from buttons. The sheet slides up partially, and the full screen cover covers the entire screen.

Target UI

-------------------------
| Sheet and FullScreenCover |
|-----------------------|
| [Show Sheet]           |
|                       |
| [Show Full Screen]     |
|                       |
-------------------------

Add a button labeled 'Show Sheet' that opens a sheet when tapped.

The sheet should show a text 'This is a sheet' and a button to dismiss it.

Add a button labeled 'Show Full Screen' that opens a full screen cover when tapped.

The full screen cover should show a text 'This is a full screen cover' and a button to dismiss it.

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    // TODO: Add state variables here

    var body: some View {
        VStack(spacing: 20) {
            Button("Show Sheet") {
                // TODO: Show sheet
            }
            Button("Show Full Screen") {
                // TODO: Show full screen cover
            }
        }
        .padding()
        // TODO: Attach sheet and fullScreenCover modifiers
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

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("Show Sheet") {
                showSheet = true
            }
            Button("Show Full Screen") {
                showFullScreen = true
            }
        }
        .padding()
        .sheet(isPresented: $showSheet) {
            VStack(spacing: 20) {
                Text("This is a sheet")
                    .font(.title)
                Button("Dismiss") {
                    showSheet = false
                }
                .padding()
                .background(Color.blue.opacity(0.7))
                .foregroundColor(.white)
                .cornerRadius(8)
            }
            .padding()
        }
        .fullScreenCover(isPresented: $showFullScreen) {
            VStack(spacing: 20) {
                Text("This is a full screen cover")
                    .font(.title)
                Button("Dismiss") {
                    showFullScreen = false
                }
                .padding()
                .background(Color.red.opacity(0.7))
                .foregroundColor(.white)
                .cornerRadius(8)
            }
            .padding()
            .background(Color(UIColor.systemBackground))
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We use two @State variables to track if the sheet or full screen cover should be shown. The buttons set these variables to true to present the views. The .sheet modifier shows a partial screen modal with a dismiss button that sets showSheet back to false. The .fullScreenCover modifier shows a full screen modal with a similar dismiss button. This demonstrates the difference between a sheet and a full screen cover in SwiftUI.

Final Result

Completed Screen

-------------------------
| Sheet and FullScreenCover |
|-----------------------|
| [Show Sheet]           |
|                       |
| [Show Full Screen]     |
|                       |
-------------------------

-- After tapping Show Sheet --
-------------------------
| This is a sheet         |
|                         |
| [Dismiss]               |
-------------------------

-- After tapping Show Full Screen --
-------------------------
| This is a full screen cover |
|                             |
| [Dismiss]                   |
-------------------------

Tap 'Show Sheet' button: A sheet slides up from bottom showing text and dismiss button.

Tap 'Dismiss' on sheet: The sheet slides down and disappears.

Tap 'Show Full Screen' button: A full screen cover appears covering entire screen with text and dismiss button.

Tap 'Dismiss' on full screen cover: The cover disappears returning to main screen.

Stretch Goal

Add a swipe down gesture to dismiss the sheet.

💡 Hint

Use the default swipe down gesture on sheets in SwiftUI; no extra code needed if using .sheet modifier.

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