Creating an iOS Login Screen using SwiftUI

3 min readMay 31, 2021

SwiftUI is apple’s latest and greatest declarative UI framework. It is exceptionally simple and easy to use to build user interfaces across all Apple platforms with the help of the Swift programming language.

How do we use it? I’m glad you asked. Let’s make a simple and elegant login screen that looks like this.

Okay, we are going to start by creating a new project in Xcode. We need to give our project a name, I will call mine simple login. We will use SwiftUI as our interface, and the swiftUI lifecycle. The language will be swift and click next to continue.

Go ahead and add an image to the app by dragggin your desired image into the assets folder.

From the above design, we can see that the UI has 7 elements stacked in a vertical manner.

Let's start by Adding a VStack and placing the elements in order.

@State var username:String = ""
@State var password:String = ""VStack(spacing: 10) {  Image(“guycoding”)  Text(“Login”)  Text(“Why work hard if you can work smart”)  TextField(“Username”,text: $username)  SecureField(“Password”,text: $password)  Button(action: {}, label: {    Text(“Login”)  })  Button(action:{}, label: {    Text(“Forgot Password?”)  })  Spacer()}.padding()

Now we should have something that looks like this.

Let's make the UI look better by adding a few modifiers to the mix.

Starting with the image let's make it resizable and change the aspect ratio to fit.

Image("guycoding")
  .resizable()
  .aspectRatio(contentMode: .fit)

Next up the two text elements lets make one bold and change the font type

Text("Login")
  .bold()
  .font(.title)Text("Why work hard if you can work smart")
  .font(.subheadline)

Moving on to the text fields lets make them look better by adding some padding and changing the background so that they stand out a bit

TextField("Username",text: $username)
  .padding()
  .background(Color(.systemGray6))
  .cornerRadius(5.0)SecureField("Password",text: $password)
  .padding()
  .background(Color(.systemGray6))
  .cornerRadius(5.0)

Now the login button. Let's add a background and change the text color to white

Button(action: {}, label: {
  HStack {
    Spacer()
    Text("Login")
       .foregroundColor(.white)
    Spacer()
    }.padding()
     .background(Color.blue)
     .cornerRadius(5.0)
})

Finally, let's add a spacer on the bottom to occupy the empty space

Spacer()

If you have made it this far, Give yourself a pat on the back because you are awesome and you have just made an awesome screen using swift UI from scratch.

Link to the illustration library that contains the image used in the project.

Video tutorial for this project

Creating an iOS Login Screen using SwiftUI

Written by Lupyana Mbembati