Easy Way to Create a Floating Action Button (FAB) in SwiftUI.

The Floating Action Button, or FAB , is a distinctive component of Android UI design known as Material Design. The FAB is a button or a set of buttons that float in the bottom right corner of a page. This button design is not standard for iOS, but in reality, many applications include Floating Action Buttons, and they are quite popular and useful.

In the following, we will try to create a Floating Action Button with SwiftUI. Currently, SwiftUI does not come with a native Floating Action Button widget/view, but we can still create it using a combination of ZStack and Button views.

#Mockup

We will create a simple application with a layout that resembles the mockup below. A List with a FAB located in the bottom right corner. This layout is very common in Android applications, such as Gmail , Dropbox , and others.

Sample mockup page with FAB

#Creating a List

The first step is to create a page with a standard List as follows.

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(1 ... 30, id: \.self) { _ in
                HStack(spacing: 15) {
                    Image(systemName: "person.fill")
                        .padding(10)
                        .background(.green.opacity(0.3))
                        .clipShape(Circle())
                    VStack(alignment: .leading) {
                        Text("Fulan bin fulan")
                        Text("Aenean sagittis leo ut massa sagittis varius ac eu mauris. Nunc interdum tellus vestibulum bibendum pulvinar.")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
        .navigationTitle("Floating Action Button")
    }
}

List View

#Adding ZStack and Button

Next is to add a button with a plus (+) icon in the bottom right corner. Therefore, we wrap the List in a ZStack and then add a Button.

struct ContentView: View {
    var body: some View {
        ZStack {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

ZStack with List and Button

By default, ZStack will place all components in the center of the stack. Therefore, change the alignment of the ZStack to .bottomTrailing. Why bottomTrailing? Because the position of the button is in the bottom right corner. So, the position of the + button will move to the bottom right corner.

If you want to change the position of the FAB , please adjust the alignment value of this ZStack accordingly.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
               ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Change ZStack Alignment to bottomTrailing

#Setting style for button

Next, let's adjust the style of the button to make it resemble the mockup, starting with a rounded background in orange color. In this case, the modifier is placed on the Image , not on the Button.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .foregroundColor(.white)
                    .padding()
                    .background(.orange)
                    .clipShape(Circle())
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Rounded FAB

#Add drop shadow

To add a floating effect to the FAB , don't forget to add the .shadow modifier to the button.

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            List {
                ...
            }

            Button {
                //
            } label: {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .foregroundColor(.white)
                    .padding()
                    .background(.orange)
                    .clipShape(Circle())
                    .shadow(radius: 5, x: 0, y: 3)
            }
            .padding()
        }
        .navigationTitle("Floating Action Button")
    }
}

Rounded FAB with shadow

At this point, you have successfully created a Floating Action Button using SwiftUI. The result can be said to be almost identical to the FAB design for Material Design.

Hasil akhir FAB dengan SwiftUI

Here are the tips/tricks for now, good luck trying them out, and hopefully, this little bit is helpful.

meshwara / SwiftUI-FAB