SwiftUI Image background Onboarding Screen

SwiftUI Image background Onboarding Screen

In this tutorial we're going to create Image background onboarding Screen using GeometryReader and ZStack

ContentView.swift

 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State private var showingSheet = false
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("bg2")
                    .resizable()
                    .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                
                VStack {
                    Image("logo")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.white)
                        .padding(.bottom, 30)
                    
                    Text("Amazing Taste & Beautiful Place")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                    Text("Discover the most amazing places in the world and share your experience Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..")
                        .foregroundColor(.white)
                        .frame(maxWidth: 320)
                        .padding(.top, 20)
                        .padding(.bottom, 50)
                    
                    Spacer()
                    
                    Rectangle()
                       .frame(height: 1)
                       .foregroundColor(.white)
                    
                    HStack {
                        Spacer()
                        Button("Login") {
                            showingSheet.toggle()
                        }
                        .font(.title3)
                        .foregroundColor(.white)
                        .padding(20)
                        
                        Spacer()
                        Button("Sign Up") {
                            showingSheet.toggle()
                        }
                        .font(.title3)
                        .foregroundColor(.white)
                        .padding(20)
                        
                        Spacer()
                   }
                   .sheet(isPresented: $showingSheet) {
                    LoginView()
                   }
               }//End VStack
                
            }// End ZStack
        }
    }// End body
}

struct LoginView: View {
    
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        Button("Press to dismiss") {
            presentationMode.wrappedValue.dismiss()
        }
        .font(.title)
        .padding()
        .background(Color.black)
    }
}

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