Sticky Bottom Button

Azura Sakan Taufik / March 03, 2022

I've been at a position where I needed to have a form of TextFields with a button at the bottom. I did the view using the usual VStack but the problem is that when the keyboard focuses, the button gets on top of it. It's pretty annoying & doesn't behave the way the design was intended. So the solution I chose after several stackoverflow searches later is to use Spacer() between the Views, in this case, the TextFields, and ignoring the bottom safe area that covers the keyboard area. This is part of my new SwiftUI Recipes which you can find here


import SwiftUI

class StickyBottomButtonVM: ObservableObject {
    @Published var name: String = ""
    @Published var email: String = ""

struct StickyBottomButton: View {
    @ObservedObject var viewModel = StickyBottomButtonVM()

    var body: some View {
        VStack {
            TextField("Name", text: $
            TextField("Email", text: $
            // MARK: - Step 1 Add Spacer to takes up the space between the TextFields (or any view) and Button
            Button(action: {
                print("I am clicked")
            }, label: {
                    .frame(maxWidth: .infinity)
        } //: VSTACK
        // MARK: - Step 2 Ignore the built-in safe area at the bottom that covers the area of the keyboard
        .ignoresSafeArea(.keyboard, edges: .bottom)

struct StickyBottomButton_Previews: PreviewProvider {
    static var previews: some View {


Bobo Banner