Introduction to SwiftUI

Intro

In this video, you’ll see how SwiftUI modifiers transform a simple layout and learn key concepts along the way. Remember, with modifiers, you can customize almost anything in your interface. You’ll start with a basic structure and then layer on customizations step by step.

Initial Setup

Look at the starter project code. Notice you have a vertical stack (called a VStack) with an image, a welcome message, and a button. It works, but you can make it much more interesting!

Step 1: Image Modifications

• The image already uses .resizable(), which is important for controlling its size. Now, add .frame(width: 100, height: 100) to give it specific dimensions. See how it changes in the preview? This demonstrates how to chain modifiers to achieve the desired look.

Image("MyCat")
  .resizable()
  .frame(width: 100, height: 100)

Step 2: Styling Text

• Right now, you have just your “Welcome to My App” message. Transform it into something more appropriate. First, you’ll replace that text with “Select Cat Age”. This tells the user what they’ll be doing with the slider you’ll add later. See how it updates right away?
• Your “Select Cat Age” text is already large thanks to the .font(.largeTitle) modifier. Now, give it a more striking appearance: Start by adding some .padding(). This creates space around the text, making it easier to read. Next, add a .background(.green). This instantly gives the text a vibrant green background. Notice the order: If you applied the background before the padding, you’d get only a thin, green border around the text itself. The order of modifiers matters! Each modifier works on the result of the one before it. This lets you create layered effects, like having padding surround the background color. Finally, .foregroundStyle(.white) changes the text color to white. This ensures the text stands out clearly against the green background.
• Below the title, add the ‘100’ number. To make it stand out, you’ll use .bold() for a thicker font and .font(.title) to make it larger. Finally, a splash of orange with .foregroundStyle() makes it extra eye-catching.

Text("Select Cat Age")
  .font(.largeTitle)
  .padding()
  .background(.green)
  .foregroundStyle(.white)
Text("100")
  .bold()
  .font(.title)
  .foregroundStyle(.orange)

Step 3: Slider & Button

• Now, you’ll add a way for the user to interact with the app! Add a Slider(value: .constant(100), in: 0...255). Applying a .tint(.green) modifier gives the slider a green color, making it visually interesting. You can also add some .padding() to give it some breathing room.

• Finally, make the button really easy to spot and use. Use .buttonStyle(.borderedProminent) to give it a clear outline and emphasis. This is an example of view-specific modifiers designed specifically for buttons. To finish, you’ll add some .padding() around it so it has space to breathe in the layout.

Slider(value: .constant(100), in: 0...255)
  .tint(.green)
  .padding()
Button("Next") {
  // Action to perform
}
.buttonStyle(.borderedProminent)
.padding()

Outro

Wow, what a transformation!

This is just a taste of what modifiers can do. Your interface looks much better, but there’s still a catch: Right now, the slider doesn’t actually do anything. To bring it to life and truly interact with users, you need to explore the power of SwiftUI’s State and Binding. Get ready to make your views dynamic in the next segment!