SwiftUI Navigation Sheets & Popovers

SwiftUI Navigation: Sheets & Popovers

Present modals using .sheet, .fullScreenCover, and popovers.

Basic Sheet

Present a modal using .sheet.

import SwiftUI

struct SheetsBasicDemo: View {
  @State private var show = false
  var body: some View {
    Button("Show Sheet") { show = true }
      .sheet(isPresented: $show) {
        VStack(spacing: 12) {
          Text("Modal")
          Button("Close") { show = false }
        }
        .padding()
      }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { SheetsBasicDemo() }
}

import SwiftUI

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

In the example above, the .sheet modifier is used to present a modal.

Full Screen Cover

Present a full screen modal using .fullScreenCover.

import SwiftUI

struct FullScreenCoverDemo: View {
  @State private var show = false
  var body: some View {
    Button("Present Full Screen") { show = true }
      .fullScreenCover(isPresented: $show) {
        CoverView(onClose: { show = false })
      }
  }
}

struct CoverView: View {
  let onClose: () -> Void
  var body: some View {
    ZStack {
      Color.black.opacity(0.85).ignoresSafeArea()
      VStack(spacing: 12) {
        Text("Full Screen").foregroundStyle(.white)
        Button("Dismiss") { onClose() }
          .tint(.white)
      }
      .padding()
    }
  }
}

import SwiftUI

struct ContentView: View {
  var body: some View { FullScreenCoverDemo() }
}

import SwiftUI

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

In the example above, the .fullScreenCover modifier is used to present a full screen modal.