Animated Radio Button In SwiftUI under 5 Minutes

Опубликовано: 27 Декабрь 2024
на канале: Cosmos Chaos Coding

🎯 Create an Interactive Radio Button in SwiftUI! ✅

In this tutorial, we’ll build a clean, animated radio button component using SwiftUI! This button toggles between selected and unselected states with a smooth animation effect, making it a stylish addition to any SwiftUI app.

✨ What You'll Learn:

Using @Binding to handle the toggle state.
Animating state changes with .easeInOut.
Building a simple, reusable radio button UI with SwiftUI components.

👨‍💻 Code Breakdown:
Circle Design: See how to create a radio button using SwiftUI’s Circle shape.
Animation: Apply smooth animations to make the button’s selection transition seamless and visually appealing.

🛠️ Prerequisites:
Basic understanding of SwiftUI.
Xcode installed to test and preview the code.

🔥 Ready to take your SwiftUI skills to the next level? Don’t forget to like, subscribe, and hit the notification bell for more SwiftUI tutorials!

Code :
import SwiftUI

struct ContentView: View {
@Binding var isChecked : Bool
var body: some View {
Circle()
.stroke(isChecked ? .red : .gray, lineWidth: 2)
.frame(width: 20)
.background(
Circle()
.fill(.red)
.frame(width: isChecked ? 50 * 0.8 : 0)
)
.onTapGesture {
withAnimation(.easeInOut(duration: 0.5)){
self.isChecked.toggle()
}
}

}
}

struct ContentViewPreview : View {
@State var startAnimation : Bool = false
var body: some View {
VStack{
ContentView(isChecked: $startAnimation)
}
}
}

#Preview {
ContentViewPreview()
}