Chapter 13
Building a Form with Picker, Toggle and Stepper

Mobile apps use forms to interact with users and solicit required data from them. Every day when using your iPhone, it's very likely you would come across a mobile form. For example, a calendar app may present you a form to fill in the information of a new event. Or a shopping app asks you to provide the shipping and payment information by showing you a form. As a user, I can't deny that I hate filling out forms. That said, as a developer, these forms help us interact with users and ask for information to complete certain operations. Developing a form is definitely an essential skill you need to grasp.

In the SwiftUI framework, it comes with a special UI control called Form. With this new control, you can easily build a form. I will show you how to build a form using this Form component. While building out a form, you will also learn how to work with common controls like picker, toggle, and stepper.

Figure 1. Building a Setting screen
Figure 1. Building a Setting screen

Okay, what project are we going to work on? Take a look at figure 1. We're going to build a Setting screen for the Restaurant app we have been working on in earlier chapters. The screen provides users with the options to configure the order and filter preferences. This type of screens is very common in real-life projects. Once you understand how it works, you will be able to create your own form in your app projects.

In this chapter, we will focus on implementing the form layout. You will understand how to use the Form component to lay out a setting screen. We will also implement a picker for selecting the sort preference, plus create a toggle and a stepper for indicating the filter preferences. Once you understand how to lay out a form, in the next chapter, I will show you how to make the app fully functional by updating the list in accordance to the user's preferences. You'll learn how to store user preferences, share data between views and monitor data update with @EnvironmentObject.

To access the full content and the complete source code, please get your copy at

results matching ""

    No results matching ""