Onboarding in SwiftUI

First of all create a new struct Model Named \"Card\":

import SwiftUI
import Foundation

struct Card: Identifiable {
    var id  = UUID()
//    var image: String
    var title : String
    var description : String
}

var testData:[Card] = [
    
//    Card(image: \"onboardImage_1\", title: \"String\", description: \"String\"),
//    Card(image: \"onboardImage_2\", title: \"String\", description: \"String\"),
//    Card(image: \"onboardImage_3\", title: \"String\", description: \"String\"),
    
    Card( title: \"Choose A Video\", description: \"Let's have a fun making your first video with ploto\"),

    Card( title: \"Choose your favourite\n feature\", description: \"We make it simple to choosing your asset and editing item smoothly\"),

    Card( title: \"Let’s have fun with\n pluto\", description: \"After final editing export your video and enjoy it\"),
    
]

Here i commented the image properties because i want to skip this item now. If you want to work with it then you can uncomment it. Then i was set some static value depend on \"Card\" Model and store in \"testData\" variable which type Card Array. Our model creation done. Now we should design our card view.

//
//  CardView.swift
//  OnboardViewApp
//
//  Created by JOYNAL ABEDIN on 20/9/22.
//

import SwiftUI

struct CardView: View {
    
    var card : Card

    var body: some View {
        VStack{
            
//            Image(card.image)
//              .resizable()
            
            Text(card.title)
                .lineLimit(2)
                .multilineTextAlignment(.center)
                .font(Font.custom(\"Nunito-ExtraBold\", size: 34))
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            Text(card.description)
                .fontWeight(.light)
                .multilineTextAlignment(.center)
                .font(Font.custom(\"Nunito-Medium\", size: 20))
                .foregroundColor(.white)
                .padding()
            
        }
        .background(Color.black)
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView(card: testData[1])
    }
}

Output:           I want to work with Lottie File, so that i created LottieView struct.

//
//  LottieView.swift
//  OnboardViewApp
//
//  Created by JOYNAL ABEDIN on 20/9/22.
//

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    
    typealias UIViewType = UIView
    var filename : String
    
    func makeUIView(context:
                    UIViewRepresentableContext)-> UIView {
        let view = UIView(frame: .zero)
        let animationView = AnimationView()
        let animation = Animation.named (filename)
        animationView.animation = animation
        animationView.contentMode =  .scaleAspectFit
        animationView.play()
        animationView.play(fromProgress: 0, //Start
                           toProgress: 1, //End
                           loopMode: LottieLoopMode.repeat(50),//Number of Times
                           completion: { (finished) in
            if finished {
                print(\"Animation Complete\")
            } else {
                print(\"Animation cancelled\")
            }
        })
        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)
        
        NSLayoutConstraint.activate([animationView.widthAnchor.constraint(equalTo:view.widthAnchor),
                                     animationView.heightAnchor.constraint(equalTo:view.heightAnchor)])
        
        return view
    }
    
    func updateUIView( _ uiView: UIView, context:
                       UIViewRepresentableContext){
    }
}

And finally i setup my OnboardView:

//
//  ContentView.swift
//  OnboardViewApp
//
//  Created by JOYNAL ABEDIN on 19/9/22.
//

import SwiftUI

struct OnboardView: View {
    
    @State private var selectedPage = 0
    init() {
        UIPageControl.appearance().currentPageIndicatorTintColor = .white
        UIPageControl.appearance().pageIndicatorTintColor = UIColor(hexaString: \"#FF4D67\")
        UIPageControl.appearance().tintColor = UIColor(hexaString: \"#FF4D67\")
    }
    var body: some View {
        
        VStack {
            if (selectedPage == 0){
                LottieView(filename: \"order\")
                    .frame(maxWidth: .infinity, maxHeight: UIScreen.main.bounds.midY)
            }
            if (selectedPage == 1){
                LottieView(filename: \"delivery\")
                    .frame(maxWidth: .infinity, maxHeight: UIScreen.main.bounds.midY)
            }
            if (selectedPage == 2){
                LottieView(filename: \"interaction\")
                    .frame(maxWidth: .infinity, maxHeight: UIScreen.main.bounds.midY)
            }
            Spacer(minLength: 0)
            VStack{
                TabView(selection: $selectedPage)
                {
                    ForEach(0..
Output:

[caption id=\"attachment_498\" align=\"alignleft\" width=\"256\"] Onboard[/caption]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

If you want to set view instead of page indicator then you can write code below:
Rectangle()
     .frame(width: 90, height: 10)
     .foregroundColor(Color.white)
     .cornerRadius(40)
     .overlay(alignment: .leading) {
         Rectangle()
             .cornerRadius(40)
             .foregroundColor(Color.green)
             .frame(width: 60, height: 10)
             .offset(x: CGFloat(selectedPage)*15.0, y: 0)
     }
Here x is possition value of overlay Rectangle().