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.