New SwiftUI: How to create a Login UI using Xcode 14

Photo by Desola Lanre-Ologun on Unsplash

Hello everyone, welcome to a new SwiftUI tutorial. I hope you are all doing well. Today I am going to show you how to design a Login UI in SwiftUI 4 and Xcode 14.

Let’s get started with opening up Xcode 14. We are going to add some colors to the Asset file that we are going to be using in this ui. The text color is just white and black standered.

Assets

Awesome now that has been added we can start with doing the fun stuff!!! We are going to create a custom button modifier and a custom textfield.

import SwiftUI

struct CustomButtonModifier: ViewModifier {

    func body(content: Content) -> some View {
        
        return content
            .foregroundColor(.white)
            .padding(.vertical)
            .padding(.horizontal,35)
            .background(
            
                LinearGradient(gradient: .init(colors: [Color("blue-light"),Color("blue")]), startPoint: .leading, endPoint: .trailing)
            )
            .clipShape(Capsule())
    }
}

import SwiftUI

struct CustomTextField: View {
    
    // Fields...
    var image: String
    var title: String
    @Binding var value: String
    
    var…