Edges

Most apps leave space for the status bar and home indicator. This one doesn't — it fills every pixel. Learning how to do that teaches you a lot about how SwiftUI thinks about space.

What you'll build

A view that fills the screen edge to edge, with colored regions showing exactly where the safe area boundaries are. Change values and see layout shift in real time.

Key concepts

.ignoresSafeArea() — By default, SwiftUI keeps content away from the notch, status bar, and home indicator. This modifier removes that restriction.

Color.blue
    .ignoresSafeArea()

.frame(maxWidth: .infinity, maxHeight: .infinity) — Tell a view to expand to fill all available space.

Rectangle()
    .frame(maxWidth: .infinity, maxHeight: .infinity)

ZStack — Stack views on top of each other in the Z axis (depth). Background content goes in first, foreground content on top.

ZStack {
    Color.indigo.ignoresSafeArea()  // fills everything
    Text("I'm on top")
}

.safeAreaInset(edge:) — Add content anchored to a safe area edge without pushing the background out of the way.

Layout is a conversation

SwiftUI layout works by parent views offering space to children, children reporting how much they want, and the parent placing them accordingly. Once you see that negotiation, layouts that confused you start to make sense.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and stretch things out.