SwiftUI Onboarding View using PageTabViewStyle

SwiftUI Onboarding View using PageTabViewStyle

ContentView.swift

 
//
//  ContentView.swift
//  Devapp
//
//  Created by Cairocoders
//

import SwiftUI //

struct ContentView: View {
    
    @State private var isOnboardinDone: Bool = false

    var body: some View {
        if isOnboardinDone {
            HomeView()
        } else if !isOnboardinDone {
            SplashView(done: $isOnboardinDone)
        } else {
            HomeView()
        }
        
    }
}

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


struct HomeView: View {

    @State private var showpopover = false

    var body: some View {
        Button("Show menu") {
            showpopover = true
        }
        .popover(isPresented: $showpopover) {
            VStack(alignment: .leading,spacing: 7.0){
                HStack(spacing: 15){
                    Button(action: {}, label: {
                        HStack {
                            Image(systemName: "paperplane.circle")
                                .font(.largeTitle)
                            Text("Submit")
                                .fontWeight(.heavy)
                                .foregroundColor(.white)
                                .padding(.vertical)
                                .frame(maxWidth: .infinity)
                        }
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                    })

                    
                    Button(action: {
                        withAnimation{

                        }
                    }, label: {
                        HStack {
                            Image(systemName: "arrowshape.turn.up.forward.circle")
                                .font(.largeTitle)
                            Text("Next")
                                .fontWeight(.heavy)
                                .foregroundColor(.white)
                                .padding(.vertical)
                                .frame(maxWidth: .infinity)
                        }
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(15)
                    })
               } //End HStack
               .padding(.bottom)
            }//End VStack
            .padding()
        }
           
    }
}

struct SplashView: View {
    
    @Binding var done: Bool
    @State private var currentTab = 0

    var body: some View {
        TabView(selection: $currentTab,
                content:  {
                    ForEach(OnboardingData.list) { viewData in
                        OnboardingView(data: viewData, done: $done)
                            .tag(viewData.id)
                    }
                })
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .background(
                LinearGradient(gradient: Gradient(colors: [.blue, .white, .yellow]), startPoint: .topLeading, endPoint: .bottomTrailing)
            )
    }
}

OnboardingData.swift

 
//
//  OnboardingData.swift
//  Devapp
//
//  Created by Cairocoders
//

import Foundation

struct OnboardingData: Hashable, Identifiable {
    let id: Int
    let backgroundImage: String
    let primaryText: String
    let secondaryText: String

    static let list: [OnboardingData] = [
        OnboardingData(id: 0, backgroundImage: "pic1", primaryText: "Online Course", secondaryText: "Online Course any place anytime"),
        OnboardingData(id: 1, backgroundImage: "pic2", primaryText: "Kick start your learning", secondaryText: "Kick start your learning Development"),
        OnboardingData(id: 2, backgroundImage: "pic3", primaryText: "Learn SwiftUI", secondaryText: "Learn SwiftUI beginners to advance")
    ]
}

OnboardingView.swift

 
//
//  OnboardingView.swift
//  Devapp
//
//  Created by Cairocoders
//

import SwiftUI


struct OnboardingView: View {
    
    var data: OnboardingData
    
    @Binding var done: Bool

    @State private var isAnimating: Bool = false
    
    var body: some View {
        VStack(spacing: 20) {
            ZStack {
                Image(data.backgroundImage)
                    .resizable()
                    .scaledToFit()
            }

            Spacer()
            Spacer()

            Text(data.primaryText)
                .font(.title2)
                .bold()
                .foregroundColor(Color.black)

            Text(data.secondaryText)
                .font(.headline)
                .multilineTextAlignment(.center)
                .frame(maxWidth: 250)
                .foregroundColor(Color.black)

            Spacer()
            
            Button(action: { done.toggle() }, label: {
                Text("Get Started")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding(.horizontal, 50)
                    .padding(.vertical, 16)
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(15)
            })
            .shadow(radius: 10)

            Spacer()
        }
        .onAppear(perform: {
            isAnimating = false
            withAnimation(.easeOut(duration: 0.5)) {
                self.isAnimating = true
            }
        })
    }
}