Sheet and fullScreenCover in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to present a sheet when the button is tapped.

iOS Swift

Button("Show Sheet") {
  showSheet = true
}
.sheet(isPresented: $[1]) {
  Text("Hello from Sheet")
}

Drag options to blanks, or click blank then click option'

AshowFullScreen

BisSheetVisible

CsheetVisible

DshowSheet

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable that is not a binding boolean.

Forgetting the $ sign before the variable name.

The .sheet modifier uses a binding boolean to control its presentation. Here, 'showSheet' is the correct state variable.

2fill in blank

medium

Complete the code to present a fullScreenCover when the button is tapped.

iOS Swift

Button("Show Full Screen") {
  [1] = true
}
.fullScreenCover(isPresented: $showFullScreen) {
  Text("Hello Full Screen")
}

Drag options to blanks, or click blank then click option'

AshowSheet

BshowFullScreen

CisFullScreenVisible

DfullScreenActive

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable name that does not match the binding.

Forgetting to set the variable to true on button tap.

The button sets the 'showFullScreen' boolean to true to trigger the fullScreenCover presentation.

3fill in blank

hard

Fix the error in the code to correctly dismiss the sheet.

iOS Swift

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

  var body: some View {
    Button("Show Sheet") {
      showSheet = true
    }
    .sheet(isPresented: $showSheet) {
      Button("Dismiss") {
        [1] = false
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

Aself.showSheet

BisPresented

CshowSheet

DshowFullScreen

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to dismiss by setting a different variable.

Using 'self.showSheet' inside the closure without explicit self capture.

To dismiss the sheet, set the same state variable controlling its presentation to false.

4fill in blank

hard

Fill both blanks to create a sheet that passes data and dismisses itself.

iOS Swift

struct DetailView: View {
  @Environment(\.[1]) var dismiss
  var message: String

  var body: some View {
    VStack {
      Text(message)
      Button("Close") {
        [2]()
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

Adismiss

BpresentationMode

Cdismiss()

Attempts:

3 left

💡 Hint

Common Mistakes

Using presentationMode instead of dismiss in iOS 15+.

Not calling dismiss as a function.

Use @Environment(\.dismiss) to get the dismiss action, then call dismiss() to close the sheet.

5fill in blank

hard

Fill all three blanks to present a fullScreenCover with a dismiss button and pass a title.

iOS Swift

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

  var body: some View {
    Button("Open Full Screen") {
      [1] = true
    }
    .fullScreenCover(isPresented: $showFullScreen) {
      FullScreenView(title: [2], onDismiss: [3])
    }
  }
}

struct FullScreenView: View {
  var title: String
  var onDismiss: () -> Void

  var body: some View {
    VStack {
      Text(title)
      Button("Close") {
        onDismiss()
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

AshowFullScreen

B"Welcome"

C{ showFullScreen = false }

DshowSheet

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the wrong variable names.

Not passing a closure for onDismiss.

Using showSheet instead of showFullScreen.

Set 'showFullScreen' to true to present. Pass a string title and a closure to set 'showFullScreen' to false to dismiss.

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