Swift UI Series #1: Floating Action Button
The Primary focus around this series is to get familiar with swift-ui
, play with animations and custom views.
Creating the FAB
To create a FAB, we add an Image with system icon into the FloatingActionView
body.
struct FloatingActionView: View {
var body: some View {
Image(systemName: "plus.circle.fill")
}
}
Next we add appropriate width
, height
and color
to FAB. Lets take the width
and height
as 64 and color as yellow
.
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 64, height: 64)
.foregroundColor(.yellow)
Here's how the UI looks after the change.

But this looks flat, let add some shadows to add more plasticity.Lets add shadow(color: Color.black.opacity(0.3), radius: 0.3, x: 1, y: 1)
after the foreground color.

we now have a perfect looking FAB with minimum effort. This is how the code looks after changes.
struct FloatingActionView: View {
var body: some View {
Image(systemName: "plus.circle.fill")
.resizable()
.frame(width: 64, height: 64)
.foregroundColor(.yellow)
.shadow(color: Color.black.opacity(0.3), radius: 0.3, x: 1, y: 1)
}
}
The complete source code can be seen here.