How to expand SwiftUI views to span across entire width or height of screen

Learn how to use frame() modifier to expand SwiftUI views to take full width or height of screen. When applied to your view, the frame() modifier positions it within another view (frame) with specified dimensions. By manipulating the maximum width and/or height of the new frame, we’ll be able to achieve the desired effect of expanding our view to desired size.

Expanding Text views

Start by adding a basic Text view with a colored background to the body of your main view:

var body: some View {
    Text("SwiftUI Tutorials")
        .font(.title)
        .background(Color.yellow)
}

Notice that the Text view takes up minimal horizontal and vertical space possible. It compressed itself.

Now, in order to expand the Text view to fill the entire width of the screen, apply the frame() modifier using maxWidth in the initializer:

Text("SwiftUI Tutorials")
    .font(.title)
    .frame(maxWidth: .infinity)
    .background(Color.yellow)

Horizontally expanded Text view in SwiftUI

What actually happens is not what we might think. We wrapped the text view with a new view which expanded across the entire width of the screen and applied the background color to the wrapper view. The text view still takes minimal horizontal space needed and we can prove it by actually applying the background color to the text view itself like that (by switching the order of modifiers):

Text("SwiftUI Tutorials")
    .font(.title)
    .background(Color.yellow)
    .frame(maxWidth: .infinity)

The blue border highlights the wrapper frame however as you can see, the text view itself is still of the smallest possible size:

Expanding the text view to span across entire height of the screen can be achieved by using the maxHeight property of the frame() modifier:

Text("SwiftUI Tutorials")
    .font(.title)
    .frame(maxHeight: .infinity)
    .background(Color.yellow)

Vertically expanded Text view in SwiftUI

You guessed it right, if you’d like to expand the text view in both directions, use maxWidth and maxHeight at the same time:

Text("SwiftUI Tutorials")
    .font(.title)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.yellow

Expanding Stack views

Expanding stack views in either of the dimensions follows the same pattern of applying the frame() modifier with desired maxWidth or maxHeight property:

VStack {
    Text("Simple Swift Guide")
        .font(.title)
    Text("SwiftUI Tutorials")
        .font(.subheadline)
        .foregroundColor(.gray)
}
.frame(maxWidth: .infinity)
.background(Color.yellow)

Expanding Buttons

Expand SwiftUI button to span across entire width of screen (with some padding added for clarity):

Button(action: {
    print("Button action")
}) {
    Text("Place Order")
        .padding()
        .frame(maxWidth: .infinity)
        .border(Color.blue)
        .padding()
}

SwiftUI Button spanning across entire width of the screen

If you’d like to expand your view out of the safe area, for example, to add a background to your app, you can use the following method with ZStack and edgesIgnoringSafeArea() modifier:

var body: some View {
    ZStack {
        Color.yellow
            .opacity(0.4)
            .edgesIgnoringSafeArea(.all)
        
        Text("SwiftUI Tutorials")
            .font(.title)
    }
}

ZStack with background ignoring safe area