How to Use Spacer in SwiftUI

Use Spacer in SwiftUI when views need flexible empty space that automatically expands. It is one of the most important tools for pushing content apart in rows, columns, headers, and card layouts.

What you’ll build or solve

You’ll learn how to use Spacer in SwiftUI to create flexible gaps, push views to edges, and improve layout balance. You’ll also know when padding or fixed frames are a better fit.

When this approach works best

This approach is the right choice when the empty space should adapt to the available screen size.

Common real-world scenarios include:

• Price rows
• Toolbar layouts
• Profile headers
• Card footers
• Dashboard rows

This is a bad idea when the gap should always stay a fixed size.

Prerequisites

You only need:

• Basic SwiftUI stacks
• Familiarity with HStack and VStack
• Understanding of layout flow

Step-by-step instructions

Step 1: Use Spacer in an HStack

The most common use is pushing views apart horizontally.

import SwiftUI

struct PriceRow: View {
    var body: some View {
        HStack {
            Text("Pro Plan")
            Spacer()
            Text("$19")
        }
    }
}

The spacer expands to fill all remaining width.

This is perfect for row-based UI.

Step 2: Use Spacer in a VStack

It also works vertically.

struct WelcomeView: View {
    var body: some View {
        VStack {
            Text("Welcome")
            Spacer()
            Button("Continue") {}
        }
    }
}

This pushes the button toward the bottom.

Step 3: Combine multiple spacers

Multiple spacers share space evenly.

HStack {
    Spacer()
    Text("Centered")
    Spacer()
}

This is a simple way to center content.

What to look for:

• Spacer fills flexible remaining space
• Great in HStack and VStack
• Perfect for edge alignment
• Multiple spacers divide space evenly
• Use fixed frames for exact gaps

Examples you can copy

Push price right

Text("Plan")
Spacer()
Text("$9")

Push button down

Text("Top")
Spacer()
Button("Done") {}

Center text

Spacer()
Text("Hello")
Spacer()

Common mistakes and how to fix them

Mistake 1: Using Spacer for fixed spacing

What the reader might do:

Use Spacer() for an exact 12-point gap.

Why it breaks: spacer grows dynamically.

Corrected approach:

Use .padding() or .frame(width:).

Mistake 2: Forgetting the stack context

What the reader might do:

Place Spacer() outside a stack.

Why it breaks: it only works meaningfully inside layout containers.

Corrected approach:

Use it inside HStack, VStack, or ZStack.

Mistake 3: Overusing many nested spacers

What the reader might do:

Use many spacers in deep layouts.

Why it breaks: layout intent becomes unclear.

Corrected approach:

Use fewer spacers plus alignment settings.

Troubleshooting

If nothing moves, confirm the spacer is inside a stack.

If the gap is too large, use fixed padding instead.

If centering feels off, balance spacers on both sides.

If the layout becomes hard to reason about, simplify nesting.

Quick recap

• Spacer fills remaining flexible space
• Great for pushing views apart
• Works in HStack and VStack
• Multiple spacers split space evenly
• Use padding for fixed gaps