How to Build a Login Screen in SwiftUI?

Today, I will explain how to create a simple and beautiful login screen in SwiftUI. SwiftUI is a feature-rich UI framework. It comes with a great ability to create seamless user interfaces for iOS apps.

It is Apple's dedicated user interface toolkit that allows iOS app developers to design apps in a declarative way. Many times, there is a lot of discussion about whether developers should utilize Storyboard or create a standard UI programmatically. And SwiftUI is the answer to this question. Here, I will share quick steps for making a login mobile screen in SwiftUI.

So let's get coding

1. Start by creating a new project in SwiftUI

Create a new project in SwiftUI and then put this block of code inside the body property. In this block code, we have declared the components which we want. SwiftUI will help us with rendering the UI part easily.

// MARK: - Properties
@State private var email = ""
@State private var password = ""

// MARK: - View
var body: some View {
    VStack {
        Text("iOS App Template")
        Image("iosapptemplate")
        TextField("Email", text: self.$email)
        TextField("Password", text: self.$password)
        Button("Sign In") {
            // Add action for Sign In button
        }
    }
}

The above code I have used is very easy to understand. You don't need to hire dedicated app developers to create this task specifically. Even a beginner-level developer can easily get an idea of this process.

This is the first part of the creation of the login screen we have done. In the next part, we will simply reorganize the structure and restyle the components to build a login screen.

2. Reorganize the structure and style of our components

Modify the two text fields as follows.

VStack {
    TextField("Email", text: self.$email)
    SecureField("Password", text: self.$password)
}

Here, we would put the text fields on the same stack for better control. Generally, text fields mostly have the same frames or constraints in seams during the authentication process. Actually, it is meant for delivering good UI/UX.

VStack(alignment: .leading, spacing: 15) {
    TextField("Email", text: self.$email)
        .padding()
        .background(themeTextField)
        .cornerRadius(20.0)
    
    SecureField("Password", text: self.$password)
        .padding()
        .background(themeTextField)
        .cornerRadius(20.0)
}
.padding([.leading, .trailing], 27.5)

In the above code, you can see the parts like padding or spacing of these text fields are the same. However, instead of configuring every pat, here we would put all the text fields into VStack. But we will just do it on the component itself.

Text and images

In this section, we don't have many tasks to do. Click right on the Previews section. It will update our code directly. After done with this, try a few text and image modifiers.

Text("iOS App Template")
    .font(.largeTitle)
    .foregroundColor(Color.white)
    .padding([.top, .bottom], 40)

Image("iosapptemplate")
    .resizable()
    .frame(width: 250, height: 250)
    .clipShape(Circle())
    .overlay(Circle().stroke(Color.white, lineWidth: 4))
    .shadow(radius: 10)
    .padding(.bottom, 50)

Buttons

In our first code, we have included Button declarations. Here, we would separate Button into two parts. The first part would be its action. And the second one is where we will lay out all of this.

Button(action: {}) {
  Text("Sign In")
    .font(.headline)
    .foregroundColor(.white)
    .padding()
    .frame(width: 300, height: 50)
    .background(Color.green)
    .cornerRadius(15.0)
}

Color gradient

At this stage, we have almost everything. Our login screen is now ready with a simple and good-looking interface. However, if you wish to add a color theme to this login screen, then you can use the following code to add Gradient Color.  To enable this, add the following code in the closing curly bracket of the biggest VStack in the below code.

.background(
    LinearGradient(gradient: Gradient(colors: [.purple, .blue]), startPoint: .top, endPoint: .bottom)
        .edgesIgnoringSafeArea(.all)
)

This code includes two colors purple and white. It is not mandatory but up to your choice.

Now, everything is ready. But one thing is yet to be done. Our VStack hasn't occupied the whole screen. To do this, add Spacer() inside the VStack. This will enable the VStack completely fill the height of the screen. You can even make it more glaring by adding a shadow for each component.

At last, we will build and run the app. And here is what our login screen will look like.

Wrapping up

Hope you would have enjoyed this process. Here, I tried to show a simple and easier way to make a login screen using SwiftUI. Since SwiftUI is relatively a new UI development framework in the iOS development community, many developers or app creators often find complexity in making the login screen quickly. The above process and code will help you use this toolkit to easily make a simple yet attractive login screen.