Floating Action Button in SwiftUI

Uplift iOS Interview

The Guide is for YOU if

• You are preparing for an iOS interview and want to improve your skills and knowledge and looking to level up your interview game and land your dream job.
• You want to gain confidence and ease during iOS interviews by learning expert tips and curated strategies.
• You want access to a comprehensive list of iOS interview QA to practice and prepare.

I want this

To create a floating button in SwiftUI, you can use a Button with a custom background and a fixed position within a ZStack. Here is an example of how you might do this:

struct FloatingButton: View {
    let action: () -> Void
    let icon: String

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button(action: action) {
                    Image(systemName: icon)
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                }
                .frame(width: 60, height: 60)
                .background(Color.red)
                .cornerRadius(30)
                .shadow(radius: 10)
                .offset(x: -25, y: 10)
            }
        }
    }
}

This creates a circular button with a red background, a white icon, and a drop shadow. The button’s action is specified by the action closure, and the icon is specified by the icon string.

To use this button in your code, you would need to create a closure that performs the desired action when the button is tapped, and pass it to the action property of the FloatingButton. You would also need to specify the icon to display on the button using the icon property.

For example:

struct FloatingButton: View {
    let action: () -> Void
    let icon: String

    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button(action: action) {
                    Image(systemName: icon)
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                }
                .frame(width: 60, height: 60)
                .background(Color.red)
                .cornerRadius(30)
                .shadow(radius: 10)
                .offset(x: -25, y: 10)
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                // Other views go here...
                Text("This creates a circular button with a red background, a white icon, and a drop shadow. The button's action is specified by the action closure, and the icon is specified by the icon string.To use this button in your code, you would need to create a closure that performs the desired action when the button is tapped, and pass it to the action property of the FloatingButton. You would also need to specify the icon to display on the button using the icon property.")
                    .padding()

                FloatingButton(action: {
                    // Perform some action here...
                }, icon: "plus")
            }
        }
    }
}

This will create a floating button with a “plus” icon that is positioned in the bottom-right corner of the view. When the button is tapped, the closure provided as the action property will be called.

Written by

ISHTIAK AHMED

Twitter LinkedIn

Get Ready to Shine: Mastering the iOS Interview

• Uplift iOS Interview - A Comprehensive Guide to iOS Interview
• iOS Dev Kit - Cheat Sheets, Posters and Infographics

Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book. Your email address will only be used for the purpose of sending the newsletter and will not be shared with third parties or advertisers. Rest assured that we value your privacy and will not spam your inbox.