Safe Area (SwiftUI)

The safe area is the region no navigation bar, tab bar, toolbar, or notch covers, and SwiftUI lays views out inside it by default. Three modifiers customize it: ignoresSafeArea expands out of it, safeAreaPadding shrinks it, and safeAreaInset carves space in it for another view.

Ignoring the Safe Area

ignoresSafeArea lets a view fill the whole screen, the usual move for full-bleed backgrounds.

ZStack {
  LinearGradient(
    colors: [.red, .yellow],
    startPoint: .topLeading,
    endPoint: .bottomTrailing
  )
  .ignoresSafeArea()
}

Its parameters scope the escape. regions picks which safe area to ignore: .container, .keyboard, or .all. edges picks the directions: top, bottom, horizontal, vertical, all, or any combination.

.ignoresSafeArea(.keyboard, edges: .bottom)
.ignoresSafeArea(.container, edges: [.top, .horizontal])

Ignoring .keyboard is how a background stays put when the keyboard rises instead of being squeezed.

Shifting with safeAreaPadding

safeAreaPadding moves the safe area inward by a fixed amount on chosen edges, so content lays out as if the screen were narrower.

LinearGradient(colors: [.red, .yellow], startPoint: .topLeading, endPoint: .bottomTrailing)
  .safeAreaPadding(.horizontal, 100)

Carving Space with safeAreaInset

safeAreaInset places a view inside the safe area and shifts the main content's safe area to make room, which is how a custom bottom bar avoids covering scrollable content.

LinearGradient(colors: [.red, .yellow], startPoint: .topLeading, endPoint: .bottomTrailing)
  .ignoresSafeArea()
  .safeAreaInset(edge: .bottom, alignment: .center, spacing: 0) {
    Color.clear
      .frame(height: 20)
      .background(Material.bar)
  }

edge sets which side the inset occupies, spacing adds a gap between the inset and the content, alignment positions the inset view, and the trailing closure builds it. safeAreaBar has the same signature and also applies the scroll edge effect, so prefer it for bars over scrolling content.