Position a button to the bottom of the screen in SwiftUI

In this SwiftUI tutorial, we will be learning to position a button or any other SwiftUI element at the bottom of the screen. By default, SwiftUI positions the element to the center of the screen. But there is something called Spacer that SwiftUI provides us for positioning elements to the extreme end of the container.

What this blog will cover:

• How to position any UI element to the bottom of the screen.
• Spacer.

Position any element at the bottom of the screen in SwiftUI

So let’s get started

struct ContentView: View {
    var body: some View{
        VStack{
            Button("Next") {
                
            }  .frame(width: 300,height: 30)
                .foregroundColor(.teal)
                .fontWeight(.bold)
                .font(.title2)
                .padding()
                 .background(Color.black)
                 .cornerRadius(20)
        }
    }
}

So this how our main view ContentView of the app looks like. It’s just a VStack that contains a button. So by default as you can see it will render the button at the center of the screen.

Using Spacer for moving the button to the bottom of the View

So for moving the button to the bottom of the screen, all we have to do is call Spacer and it will move the button to the bottom of its container.

struct ContentView: View {
    var body: some View{
        VStack{
            
            //for moving views to extreme ends
            Spacer()
         
            Button("Next") {
                
            }  .frame(width: 300,height: 30)
                .foregroundColor(.teal)
                .fontWeight(.bold)
                .font(.title2)
                .padding()
                 .background(Color.black)
                 .cornerRadius(20)
        }
    }
}

If you add a spacer in between the two SwiftUI elements it will position each element to the extreme end of their container: one at the top and another at the bottom of the container if the container is vertical stack view. And if the container is HStack or Horizontal stack view, the spacer will move one element to the left end of the container and one to the right.

struct ContentView: View {
    var body: some View{
        VStack{
            Text("Position a button to the bottom of the screen").fontWeight(.bold)
                .font(.title3).padding()
            
            //for moving views to extreme ends
            Spacer()
            
            Button("Next") {
                
            }  .frame(width: 300,height: 30)
                .foregroundColor(.teal)
                .fontWeight(.bold)
                .font(.title2)
                .padding()
                .background(Color.black)
                .cornerRadius(20)
        }.multilineTextAlignment(.center)
    }
}