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.