https://github.com/sardarsaqibkhan/swiftui-onboarding
This Demo project showcasing the implementation of onboarding screen by using tabview in swiftUI.
https://github.com/sardarsaqibkhan/swiftui-onboarding
animations appintro introductory onboarding onboarding-screen swift swiftui tabview walkthrough
Last synced: 4 months ago
JSON representation
This Demo project showcasing the implementation of onboarding screen by using tabview in swiftUI.
- Host: GitHub
- URL: https://github.com/sardarsaqibkhan/swiftui-onboarding
- Owner: SardarSaqibKhan
- Created: 2025-04-09T11:18:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T11:50:04.000Z (over 1 year ago)
- Last Synced: 2025-04-09T12:28:33.426Z (over 1 year ago)
- Topics: animations, appintro, introductory, onboarding, onboarding-screen, swift, swiftui, tabview, walkthrough
- Language: Swift
- Homepage:
- Size: 8.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SwiftUI-Onboarding
## About
Onboarding plays a crucial role in modern apps, helping to engage users and introduce them to key features. This demo project is built entirely with SwiftUI and showcases a clean and structured approach to implementing an onboarding experience. It serves as a helpful reference for developers looking to integrate engaging animations and user-friendly onboarding flows in their apps.
## Demo
The video below demonstrates the onboarding experience in action:
## Instructions
Update `OnboardingDataModel.swift` with your data, each entry in the array will add new onboarding screen.
```swift
extension OnboardingModel {
static let dataSource = [
OnboardingModel(
id: 1,
title: "Walking",
description: "Take your first step toward a healthier lifestyle. Walking helps improve stamina, mood, and overall well-being.",
imageName: "figure.walk"
),
OnboardingModel(
id: 2,
title: "Running",
description: "Boost your endurance and stay fit with personalized running plans. Track your pace, distance, and goals.",
imageName: "figure.run"
),
OnboardingModel(
id: 3,
title: "Basket Ball",
description: "Jump into fast-paced gameplay! Practice your shots, monitor performance, and level up your basketball skills.",
imageName: "figure.basketball"
),
OnboardingModel(
id: 4,
title: "Archery",
description: "Focus, aim, and release! Archery helps build concentration and precision. Master the skill with guided sessions.",
imageName: "figure.archery"
),
OnboardingModel(
id: 5,
title: "Badminton",
description: "Smash your way to fitness with energetic badminton drills. Track rallies, improve reaction time, and play like a pro.",
imageName: "figure.badminton"
)
]
}
```
## Instructions
landing view `OnboardingApp.swift` showing/hiding by using Userdefualt.
```swift
import SwiftUI
@main
struct OnboardingApp: App {
@AppStorage("hasSeenOnboardingView") private var hasSeenOnboardingView = false
var body: some Scene {
WindowGroup {
if hasSeenOnboardingView {
ContentView()
} else {
OnboardingView {
hasSeenOnboardingView = true
}
}
}
}
}
```
```swift
struct OnboardingView: View {
@State private var currentPage: Int = 1
var totalPages: Int {
OnboardingModel.dataSource.count
}
var onBoardingDatasource: [OnboardingModel] {
OnboardingModel.dataSource
}
var onSkip: () -> Void
var body: some View {
ZStack {
Image("backgroundImage")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(minWidth: 0, maxWidth: .infinity)
.edgesIgnoringSafeArea(.all)
VStack {
skipButton
onboardingTabView
navigationButtons
}
.padding()
}
}
.
.
.
```