SwiftUI: How to make Floating button with animated menu?

Xcode 12 — iOS 14

50 Line demo to make animated floating menu

In this tutorial, We will learn how to create animated floating Menu UI.

Implementation Logic

1. Create a Floating Button.
2. Create menu above Floating Button in a vertical stack
3. Move this vertical stack to Bottom right
4. Hide show button with animation

Creating a Floating Button

Button(action: {}, label: {
   Image(systemName: "plus")
     .foregroundColor(.white)
     .font(.headline)
     .frame(width: 60, height: 60)
})
.background(Color.blue)
.clipShape(Circle())
.padding(.all, 10)

Create menu above Floating Button in a vertical stack and Move this vertical stack to Bottom right

HStack {  
  Spacer() //Move all item to right
  VStack {
     Spacer() //Move all item to bottom
     ForEach(/*for all item in menu*/) {
        ///Set All floating Button
     }
     //Main Floating Button
  }
}

Hide show button with animation

Add a State to show and hide button. Add show/hide logic in animation block.