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!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay