Skip to content

SwiftUI: Spacer

If your design requires a lot of empty space sometimes, this might be a good news for you. Traditionally, you would create a view with a background color of white. The old way is now done away with this new introduction of spacer.

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack.

Apple Documentation

In this tutorial, you’ll learn what it takes to build a spacer in SwiftUI. You’ll learn:

  • How to build a spacer from scratch.

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 11

Spacer

Spacer is super useful in stack. To create a spacer in your code, you may do it as below. It’s literally that one line word of code.

By inserting the Spacer in between the Text and Image. It automatically size the content for you.

Without the Spacer, it would look like the image below:

There are a lot more things you can do with spacer. Let’s say you would like a space but also with some background color.

Remember that Spacer is also a View. Giving you the flexibility to configure it.

Min Length

Spacer also let you configure it’s minimum length. It works only when both view are really close to each other. Below is the image of a minimum length of 50.

Without minimum length, it would look as below:

However, your designer think there is still a lot of space. Well, what do we have to say. Let’s set the minimum length to 0.

Where to go From Here

If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2020.