Sheet

iOS 16.4+iPadOS 16.4+

Presents content in a sheet over the current view, driven by an item binding.

import SwiftUIstruct SheetUsageExample: View {    struct Document: Identifiable {        let id: String        var title: String { id }    }    @State private var selectedDocument: Document?    var body: some View {        FLXButton("Show details", variant: .primary) {            selectedDocument = Document(id: "Q3 roadmap.pdf")        }        .padding(FLXSpacing.xl)        .flxSheet(item: $selectedDocument) { document in            VStack(alignment: .leading, spacing: FLXSpacing.md) {                Text(document.title)                    .flxFont(.title3)                Text("Updated 2 days ago.")                    .flxFont(.callout)                Spacer()            }            .padding(FLXSpacing.xl)            .presentationDetents([.medium])        }    }}

Installation

Requires the design system foundation (tokens and theme).

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/ios-sheet.json

Usage

FLXButton("Show details", variant: .primary) {    selectedDocument = Document(id: "Q3 roadmap.pdf")}.flxSheet(item: $selectedDocument) { document in    Text(document.title)        .presentationDetents([.medium])}

flxSheet is a View modifier, like .sheet. It's always controlled: item comes from the presenting screen.

Behavior

VoiceOver focus returns to the trigger when the sheet dismisses. Use .interactiveDismissDisabled() inside the content to disable swipe-to-dismiss.

Detents

Set with .presentationDetents(_:) inside the content, like a native sheet. Defaults to .large.

FLXButton("Compact", variant: .outline) {  compactItem = Item(id: "Compact")}.flxSheet(item: $compactItem) { item in  Text(item.title)      .presentationDetents([.fraction(0.3)])}FLXButton("Medium", variant: .outline) {  mediumItem = Item(id: "Medium")}.flxSheet(item: $mediumItem) { item in  Text(item.title)      .presentationDetents([.medium])}FLXButton("Large", variant: .outline) {  largeItem = Item(id: "Large")}.flxSheet(item: $largeItem) { item in  Text(item.title)}FLXButton("Resizable", variant: .outline) {  resizableItem = Item(id: "Resizable")}.flxSheet(item: $resizableItem) { item in  Text(item.title)      .presentationDetents([.medium, .large])}

Custom styling

.sheet has no style protocol, so there's no FLXSheetStyle or override.

API Reference

flxSheet

func flxSheet<Item: Identifiable, SheetContent: View>(    item: Binding<Item?>,    onDismiss: (() -> Void)? = nil,    @ViewBuilder content: @escaping (Item) -> SheetContent) -> some View

For more information about .sheet, see the Apple documentation.