Create a Floating Action Button with SwiftUI

Darren
Darren
Aug 4, 2019 · 6 min read
Image for post
Image for post

Orginal post can be found here: programmingwithswift.com

Image for post
Image for post

In todays tutorial we will be learning how to create a floating action button using SwiftUI. I have wanted to make a floating action button since SwiftUI came out, but I never got around to it until now. While making this button I realised the power of ZStack, which is what makes building this button so easy.

The final product will look like this:

Image for post
Image for post

What are we building

Step 1: Create the Item struct

Above your struct ContentView: View add the below code:

struct Item {
let uuid = UUID()
let value: String
}

In our ContentView we will have an array of the above Item and our list will have a Text view that will display the value of each Item in the array.

Step 2: Setup the List and view State

struct ContentView: View {
var body: some View {
Text("Hello World")
}
}

What we need to do now is to add in the items variable which will be the data source for the list, but we also need to add the List.

Update the your ContentView to look like the below:

struct ContentView: View {
@State private var items = [Item]()

var body: some View {
ZStack {
List(self.items, id: \.uuid) { item in
Text(item.value)
}
}
}
}

As you can see, we have added a new private variable which is an array of Item.

In the body is where everything will happen. As you can see we have already added in the most important part, the ZStack. This is what will allow our button to float. Inside the ZStack we have add a List view which will display each item that is in the items array.

Step 3: Setting up the button positioning

The first thing we need to do now is to add a VStack below our ZStack. Update the body content to look like this:

ZStack {
List(self.items, id: \.uuid) { item in
Text(item.value)
}
VStack {
// Basic button holder layout
}
}

Using the VStack here will allow us to position the button at the bottom of the screen. In order to do that, update your VStack to look like this:

VStack {
Spacer()
}

All we have done now is replaced the // Basic button holder layout comment with Spacer(). This spacer will allow us to push the button to the bottom of the screen. But to do that we need to add an HStack below the Spacer().

Add the following code below the Spacer() :

HStack {
Spacer()
}

Your VStack should look like this now:

VStack {
Spacer()

HStack {
Spacer()
}
}

Inside the HStack we have put another Spacer(). This works in the same way that the Spacer() in the VStack works, except using an HStack the Spacer() will allow us to move content to the left or right instead of up and down.

Step 4: Add the button

Add the following code below the Spacer() in the HStack:

Button(action: {
self.items.append(Item(value: "Item"))
}, label: {
Text("+")
})

This button will have a “+” as its text, and every time we tap on it, it will add a new item to the list. Each item will have the same value of “item”, you can change this if you want, but I kept it simple as this is not the focus of this tutorial.

After you have added the button, the app should look like this:

Image for post
Image for post

Ok, this is not what I promised in the beginning. But functionally it should work, it just needs to be styled properly.

Step 5: Add button styling

Text("+")
.font(.system(.largeTitle))
.frame(width: 77, height: 70)
.foregroundColor(Color.white)
.padding(.bottom, 7)

This will use a bigger font, we will also set the frame which is important because the button size is influenced by this. We then change the text color to be white and finally we add some padding to the bottom. Without the padding the text is not vertically centered in the Button.

I would add a screenshot, but since we changed the text color to white you won’t be able to see the button. There is no point to an invisible button, so lets update the button itself so that we can clearly see it.

Replace your button code with the following code:

Button(action: {
self.items.append(Item(value: "Item"))
}, label: {
Text("+")
.font(.system(.largeTitle))
.frame(width: 77, height: 70)
.foregroundColor(Color.white)
.padding(.bottom, 7)
})
.background(Color.blue)
.cornerRadius(38.5)
.padding()
.shadow(color: Color.black.opacity(0.3),
radius: 3,
x: 3,
y: 3)

This is the full Button code. You can see our Text view still has all of its styling, but now the Button also has styling.

What did we do? We added a background color to our Button so that we can see it. We then rounded the corners by setting the radius to 38.5, which is half of 77, which is the width of the Text view. After that we added some padding, and then lastly we added a small shadow.

If you build and run the app now it should look like this:

Image for post
Image for post

And there it is, a floating button. If you tap on it the list should update with new items, it should look like this:

Image for post
Image for post

If you are not seeing the above, then double check your code with the below code. This is the code that I am running to get the above functionality.

import SwiftUIstruct Item {
let uuid = UUID()
let value: String
}
struct ContentView: View {
@State private var items = [Item]()

var body: some View {
ZStack {
List(self.items, id: \.uuid) { item in
Text(item.value)
}

VStack {
Spacer()
HStack {
Spacer()
Button(action: {
self.items.append(Item(value: "Item"))
}, label: {
Text("+")
.font(.system(.largeTitle))
.frame(width: 77, height: 70)
.foregroundColor(Color.white)
.padding(.bottom, 7)
})
.background(Color.blue)
.cornerRadius(38.5)
.padding()
.shadow(color: Color.black.opacity(0.3),
radius: 3,
x: 3,
y: 3)
}
}
}
}
}

If you liked this tutorial, please share it with others that might enjoy it too!


Originally published at https://programmingwithswift.com on August 4, 2019.

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Darren

Written by

Darren

Creator of https://imageresizer.online. Writing swift tutorials at https://programmingwithswift.com.

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Darren

Written by

Darren

Creator of https://imageresizer.online. Writing swift tutorials at https://programmingwithswift.com.

Programming with Swift

Beginner friendly Swift Development tutorials and guides

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store