DEV Community

Cover image for Build a FAB-ulous Button (Xcode 16 and iOS 18) - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on • Edited on

Build a FAB-ulous Button (Xcode 16 and iOS 18) - #30DaysOfSwift

Day 0: Embarking on the Swift & SwiftUI Odyssey

Welcome to the first post in my 30-day exploration of SwiftUI!

Today, we're diving into a fundamental UI element: the Floating Action Button (FAB).

Let's create a visually appealing & interactive FAB for your SwiftUI-based iOS app.

Placement: Positioned at the bottom right corner for easy accessibility.

Icon: A plus (+) symbol to clearly indicate an "Add" action.

Style: A clean, minimalist design the can blend with your UI.

Here's a sneak peek of what we'll achieve:

Screenshot of an app with FAB button

Placement: Positioned at the bottom right corner for easy accessibility.
Icon: A plus (+) symbol to clearly indicate an "Add" action.
Style: A clean, minimalist design the can blend with your UI.

Ready to code? Let's dive in:

Code for implementing FAB button

var body: some View {
    VStack(spacing: 20) {
        // ...
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .overlay(
        VStack {
            Spacer() // Pushes the button to the bottom
            HStack {
                Spacer() // Pushes the button to the right
                Button(action: {
                    // Button Action here
                }) {
                    Image(systemName: "plus")
                        .foregroundColor(.white)
                        .padding()
                        .background(Color(.green))
                        .clipShape(Circle())
                        .shadow(color: Color(.gray), radius: 2.5)
                }
                .padding() 
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    )
}
Enter fullscreen mode Exit fullscreen mode

What do you think of this FAB design? Share your ideas, suggestions, or improvements.

Happy coding!

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay