VStack fill the width of the screen - SwiftUI

Sep 17, 2022 1 min read
VStack fill the width of the screen - SwiftUI

Generally when we use VStack with few views we observed that there is some empty place left, here's how you can fix that without using tricky ways such as HStack with a Spacer():

1. By using frame
struct ContentView: View {
    var body: some View {
        VStack {
            Text("road2crypto.com")
        }
        .frame(
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .background(Color.gray)
    }
}
2. Use GeometryReader with frames

GeometryReader returns a flexible preferred size to its parent layout

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("road2crypto.com")
            }
            .frame(
                width: geometry.size.width,
                height: geometry.size.height,
                alignment: .topLeading
            )
        }
        .background(Color.gray)
    }
}
Great! Next, complete checkout for full access to ArturoFM.
Welcome back! You've successfully signed in.
You've successfully subscribed to ArturoFM.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.