Text view and modifiers in iOS Swift - Mini App: Build & Ship

Build: Simple Text Styling

This screen shows a text label with different styles applied using modifiers.

Target UI

-------------------------
|                       |
|   Hello, SwiftUI!      |
|                       |
|   (Styled Text Label)  |
|                       |
-------------------------

Display a Text view with the string 'Hello, SwiftUI!'

Apply a large title font style

Make the text color blue

Add padding around the text

Center the text horizontally and vertically on the screen

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        // TODO: Add your Text view with modifiers here
        Text("")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.white)
            .multilineTextAlignment(.center)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We created a Text view with the string "Hello, SwiftUI!". Then, we applied the .font(.largeTitle) modifier to make the text large. The .foregroundColor(.blue) modifier changes the text color to blue. We added .padding() to give space around the text so it doesn't touch the edges. To center the text both vertically and horizontally, we used .frame(maxWidth: .infinity, maxHeight: .infinity) which expands the view to fill the screen, and the text is centered by default inside this frame. The background is set to white for clarity. This creates a simple, styled text label centered on the screen.

Final Result

Completed Screen

-------------------------
|                       |
|                       |
|   Hello, SwiftUI!      |
|                       |
|                       |
-------------------------

The text is centered on the screen.

The text is large and blue.

No user interaction is needed; this is a static display.

Stretch Goal

Add a button below the text that changes the text color to red when tapped.

💡 Hint

Use @State to track the color and a Button with an action to toggle the color.

Practice

1. What does the Text view do in SwiftUI?

easy

A. Creates a button for user interaction

B. Displays a string of text on the screen

C. Draws a rectangle shape

D. Plays a video clip

Solution

1. Step 1: Understand the role of Text view

   The Text view is designed to show words or sentences on the screen in SwiftUI.

2. Step 2: Differentiate from other views

   Buttons, shapes, and media players serve different purposes, not displaying plain text.

3. Final Answer:

   Displays a string of text on the screen -> Option B

4. Quick Check:

   Text view = shows text [OK]

Hint: Text view always shows words on screen [OK]

Common Mistakes:

• Confusing Text with Button or Image
• Thinking Text plays media
• Assuming Text draws shapes

2. Which of the following is the correct way to change the font size of a Text view to 24 points?

easy

A. Text("Hello").font(.system(size: 24))

B. Text("Hello").fontSize(24)

C. Text("Hello").setFont(24)

D. Text("Hello").fontSize = 24

Solution

1. Step 1: Recall SwiftUI font modifier syntax

   The correct modifier to set font size is .font(.system(size: value)).

2. Step 2: Check each option

   Only Text("Hello").font(.system(size: 24)) uses the correct SwiftUI syntax. Others are invalid or do not exist.

3. Final Answer:

   Text("Hello").font(.system(size: 24)) -> Option A

4. Quick Check:

   Use .font(.system(size:)) for font size [OK]

Hint: Use .font(.system(size:)) to set font size [OK]

Common Mistakes:

• Using non-existent .fontSize modifier
• Trying to assign fontSize property directly
• Confusing method names

3. What will be the color of the text displayed by this code?

Text("Welcome")
  .foregroundColor(.red)
  .foregroundColor(.blue)

medium

A. Red

B. Purple

C. Blue

D. Black (default)

Solution

1. Step 1: Understand modifier chaining order

   Modifiers apply in order; the last .foregroundColor overrides previous ones.

2. Step 2: Identify final color

   The last color set is .blue, so the text color will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Last modifier wins = Blue [OK]

Hint: Last color modifier sets the text color [OK]

Common Mistakes:

• Thinking colors combine or blend
• Assuming first modifier applies
• Ignoring modifier order

4. Identify the error in this SwiftUI code snippet:

Text("Hello")
  .font(.title)
  .padding(10, 20)

medium

A. Padding modifier does not accept two numbers like that

B. Text view cannot have modifiers chained

C. Font modifier .title is invalid

D. Padding modifier requires only one argument

Solution

1. Step 1: Check padding modifier syntax

   The .padding() modifier accepts either no arguments, one argument for uniform padding, or a specific edge set with length.

2. Step 2: Analyze given arguments

   Passing two numbers directly like .padding(10, 20) is invalid syntax in SwiftUI.

3. Final Answer:

   Padding modifier does not accept two numbers like that -> Option A

4. Quick Check:

   .padding() needs one argument or edge set [OK]

Hint: Padding takes one value or edges + value [OK]

Common Mistakes:

• Passing multiple numbers directly to padding
• Confusing padding with frame size
• Assuming .title font is invalid

5. You want to create a Text view that shows "SwiftUI Rocks!" in large bold font, colored green, with padding around it. Which code snippet achieves this correctly?

hard

A. Text("SwiftUI Rocks!")
.font(.bold.largeTitle)
.foregroundColor(.green)
.padding()

B. Text("SwiftUI Rocks!")
.font(.largeTitle.bold)
.foregroundColor(.green)
.padding()

C. Text("SwiftUI Rocks!")
.font(.largeTitle)
.foregroundColor(.green.bold())
.padding()

D. Text("SwiftUI Rocks!")
.font(.largeTitle.bold())
.foregroundColor(.green)
.padding()

Solution

1. Step 1: Apply bold to font correctly

   Using .font(.largeTitle.bold()) chains the bold style properly with the font size.

2. Step 2: Set color and padding

   .foregroundColor(.green) sets the text color, and .padding() adds default padding around the text.

3. Step 3: Check other options for errors

   Text("SwiftUI Rocks!") .font(.largeTitle).bold() .foregroundColor(.green) .padding() tries to call .bold() separately which is invalid on Font. Text("SwiftUI Rocks!") .font(.largeTitle) .foregroundColor(.green.bold()) .padding() tries to bold the color, which is incorrect. Text("SwiftUI Rocks!") .font(.bold.largeTitle) .foregroundColor(.green) .padding() uses invalid font syntax.

4. Final Answer:

   Text("SwiftUI Rocks!") .font(.largeTitle.bold()) .foregroundColor(.green) .padding() -> Option D

5. Quick Check:

   Use .font(.largeTitle.bold()) for bold large font [OK]

Hint: Chain .bold() inside .font() for bold text [OK]

Common Mistakes:

• Calling .bold() separately on Text or Font
• Trying to bold the color
• Using invalid font modifier order