SwiftUI Forms & State — Login Form with TextFields, Modifiers, and State in Xcode 11.
Create a basic login form with SwiftUI in Xcode. You will use TextField, NavigationView, NavigationBarTitle, and State binding in SwiftUI to create this form.
Objective: Create a form to learn more about Forms, TextFields, Modifiers, and State in SwiftUI
My name is Maxwell, and I run maxcodes.io. Nice to finally meet you.
Step 1 — create a new SwiftUI application.
Make sure SwiftUI is selected
Step 2 — Add a NavigationView and Modifiers
step 2 explained:
- navigation view lets us use large titles
- Horizontal Stack for our content
- padding and background color for nice styles
- navigationBarTitle for a large title
Step 3 — Username and Password TextFields
We can actively keep track of our form field state by binding state variables to each TextField in SwiftUI.
step 3 explained
- two TextFields each with appropriate style modifiers (see the video linked up top for a line by line explanation)
- state variables to bind to each text field
step 4 — State: Seeing State Update Automatically
Simply create two Text views within a new VStack right before our TextFields with references to each state variable to actively display state in our application.
As you type, these Text views will update in real-time. Pretty neat.
Step 5 — Button: add a button in SwiftUI
Just below our TextFields, add a Button with a blank action. You can choose to not keep it blank and have it run an action if you prefer. Ideally what you would want to do in reactive programming is call an action creator that eventually hits an API endpoint that logs the user in on a backend API.
Add a Text view with the title of “Login” to our button and add the appropriate modifiers to get the desired UI output.
Step 5 — Feature Complete — That’s all folks!
You now have a login form you can use in any way you prefer.
If you want to learn more about SwiftUI and learn much more about SwiftUI such as Drawing Paths and Shapes in SwiftUI, see the Complete SwiftUI Development course with this discounted coupon.
Tweet me your article and video requests and I will make them!
Thanks Fam!
I truly appreciate those of you who watch my videos, read my articles, and take my courses.
Thanks,
And as always, I will see you in the very next video.
-Max.
