I want to create custom toggle switch with animation color - swiftui

Question

I am learning swift ui and I want to make custom toogle switch In which I want to add time duration to switch off and on and I want to change color when switch turn off and on and I want to add icon in it

I am beginner in swift ui so I don't know how to do it

I attach example of my view below that I want to make

Answer 1

Using a custom view container:

 struct ToggleView<Content: View>: View {
    @Binding var isOn: Bool
    var backGround: Content
    var toggleButton: Content?
    init(isOn: Binding<Bool>, @ViewBuilder backGround: @escaping () -> Content, @ViewBuilder button: @escaping () -> Content? = {nil}) {
        self._isOn = isOn
        self.backGround = backGround()
        self.toggleButton = button()
    }
    var body: some View {
        GeometryReader { reader in
            HStack {
                if isOn {
                    Spacer()
                }
                VStack {
                    if let toggleButton = toggleButton {
                        toggleButton
                            .clipShape(Circle())
                    }else {
                        Circle()
                            .fill(Color.white)
                    }
                }.padding(2.5)
                .frame(width: reader.frame(in: .global).height)
                .onTapGesture {
                    withAnimation {
                        isOn.toggle()
                    }
                }.modifier(Swipe { direction in
                    if direction == .swipeLeft {
                        withAnimation() {
                            isOn = true
                        }
                    }else if direction == .swipeRight {
                        withAnimation() {
                            isOn = false
                        }
                    }
                })
                if !isOn {
                    Spacer()
                }
            }.background(backGround)
            .clipShape(Capsule())
            .frame(width: 60, height: 30)//control the frame or remove it and add it to ToggleView
        }
    }
}

struct Swipe: ViewModifier {
    @GestureState private var dragDirection: Direction = .none
    @State private var lastDragPosition: DragGesture.Value?
    @State var position = Direction.none
    var action: (Direction) -> Void
    func body(content: Content) -> some View {
        content
            .gesture(DragGesture().onChanged { value in
                lastDragPosition = value
            }.onEnded { value in
                if lastDragPosition != nil {
                    if (lastDragPosition?.location.x)! < value.location.x {
                        withAnimation() {
                            action(.swipeRight)
                        }
                    }else if (lastDragPosition?.location.x)! > value.location.x {
                        withAnimation() {
                            action(.swipeLeft)
                        }
                    }
                }
            })
    }
}

enum Direction {
    case none
    case swipeLeft
    case swipeRight
    case swipeUp
    case swipeDown
}

Usage:

With Custom Button:

ToggleView(isOn: $isOn) {
    Color.blue //you can put anything Image, Color, View.... & you can use different images depending on the toggle state using an if statement
}button: {
    Color.green //you can put anything Image, Color, View.... & you can use different images depending on the toggle state using an if statement
}.frame(width: 60, height: 30)

Without Custom Button:

ToggleView(isOn: $isOn) {
    Color.blue //you can put anything Image, Color, View.... & you can use different images depending on the toggle state using an if statement
}.frame(width: 60, height: 30)