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.