Chapter 6: Login page – Creating more complex user interfaces

What you’ll learn in this chapter:

  • Creating more complex user interfaces with SwiftUI
  • Handling user input by using TextFields
  • Practicing @State properties
  • Outsourcing State-dependent views

What we’ll create 🚀

In this chapter, we strengthen our skills in building interfaces with SwiftUI by creating a login page. The login page will prompt the user to enter his credentials. Depending on whether these are correct, we provide the user with corresponding feedback.

By building this login page, we deepen our understanding of the @State property wrapper. At the same time, we learn how to handle user input by working with TextFields in SwiftUI. So, let’s set up our project!

Setting up the project ⚙️

As always, we start by creating a new Xcode project. 

We want to display the user’s profile picture in the app, so let’s import a sample image into the Assets.xcassets folder.

We will also use a certain gray color multiple times. For being able to use a custom color in SwiftUI views, we have to create a corresponding color set in our Assets.xcassets folder.

To do this, open the Assets.xcassets folder, right-click somewhere in the finder area of the Assets folder and click on “Color Set”. Rename the Color Set to “LightGray”.

Now we have to define which specific color our “LightGray” should have in the “Light Mode” and in the “Dark Mode” of the iOS platform. For the former, we click on “Any Appearance” and define the corresponding color using the color panel in the Inspector Area. We repeat this step for the “Dark Appearance”.

Hint: Instead of using the Color Panel, you can also enter the hex value of the colors by changing the Input Method (for example #EAE9EB AND #1C1C1C).

Creating a new Color Set in Xcode 13

One reply on “Chapter 6: Login page – Creating more complex user interfaces”

Leave a Reply

Your email address will not be published. Required fields are marked *