SwiftUI Expandable Floating Action Button

SwiftUI Expandable Floating Action Button

ContentView.swift

 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State var show = false
    
    var body: some View {
        
        ZStack {
            
            List(0..<20) { list in
               Text("List View \(list)")
            }
            VStack {
                
                Spacer()
                
                HStack {
                    
                    Spacer()
                    
                    FloatingActionButton(show: $show)
                        .padding(.trailing, 30)
                }.padding([.bottom], 20)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

struct FloatingActionButton : View {
    
    @Binding var show : Bool
    
    var body: some View {
        
        VStack(spacing : 20) {
            
            if self.show {
                
                Button(action: {
                    self.show.toggle()
                }) {
                    Image(systemName: "video").resizable().frame(width: 25, height: 15).padding(22)
                }
                .background(Color.gray)
                .foregroundColor(Color.white)
                .clipShape(Circle())
                
                Button(action: {
                    self.show.toggle()
                }) {
                    Image(systemName: "message").resizable().frame(width: 25, height: 15).padding(22)
                }
                .background(Color.gray)
                .foregroundColor(Color.white)
                .clipShape(Circle())
                
                Button(action: {
                    self.show.toggle()
                }) {
                    Image(systemName: "person.badge.plus").resizable().frame(width: 25, height: 15).padding(22)
                }
                .background(Color.gray)
                .foregroundColor(Color.white)
                .clipShape(Circle())
            }
            Button(action: {
                self.show.toggle()
            }) {
                Image(systemName: "chevron.up").resizable().frame(width: 25, height: 15).padding(22)
            }
            .background(Color.green)
            .foregroundColor(Color.white)
            .clipShape(Circle())
            .rotationEffect(.init(degrees: self.show ? 180 : 0))
        }.animation(.spring())
    }
}