Modifier chaining in iOS Swift - Mini App: Build & Ship

Build: Modifier Chaining Demo

This screen shows a text label styled using multiple chained modifiers in SwiftUI.

Target UI

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

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

Chain modifiers to set font to title, make text bold, color it blue, add padding, and a rounded border

Center the text vertically and horizontally on the screen

Starter Code

iOS Swift

import SwiftUI

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

struct ModifierChainingDemo_Previews: PreviewProvider {
    static var previews: some View {
        ModifierChainingDemo()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ModifierChainingDemo: View {
    var body: some View {
        ZStack {
            Color.white.edgesIgnoringSafeArea(.all)
            Text("Hello, SwiftUI!")
                .font(.title)
                .bold()
                .foregroundColor(.blue)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.blue, lineWidth: 2)
                )
        }
    }
}

struct ModifierChainingDemo_Previews: PreviewProvider {
    static var previews: some View {
        ModifierChainingDemo()
    }
}

We use a ZStack with a white background to fill the screen. The Text view displays the string 'Hello, SwiftUI!'. We chain modifiers to style the text: font(.title) sets a large font, bold() makes it bold, foregroundColor(.blue) colors it blue, and padding() adds space around the text. Then, overlay adds a rounded rectangle border with a blue stroke. The ZStack centers the text vertically and horizontally by default.

Final Result

Completed Screen

-------------------------
|                       |
|   Hello, SwiftUI!      |
|  (blue, bold, title)  |
|  [rounded blue border]|
|                       |
-------------------------

The text is centered on the screen.

No interactive elements; purely visual styling demonstration.

Stretch Goal

Add a button below the text that toggles the text color between blue and red using modifier chaining.

💡 Hint

Use a @State variable to track the color and update the foregroundColor modifier dynamically.