Custom ViewModifiers in iOS Swift - Mini App: Build & Ship

Build: StyledTextScreen

This screen shows a text label styled using a custom ViewModifier to add padding, background color, and rounded corners.

Target UI

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

Create a custom ViewModifier named 'RoundedBackground' that adds padding, a blue background color, and rounded corners.

Apply this modifier to a Text view displaying 'Hello, SwiftUI!'

Use a VStack to center the text vertically and horizontally on the screen.

Starter Code

iOS Swift

import SwiftUI

struct StyledTextScreen: View {
    var body: some View {
        VStack {
            // TODO: Add Text with custom modifier here
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
    }
}

// TODO: Define custom ViewModifier here

struct StyledTextScreen_Previews: PreviewProvider {
    static var previews: some View {
        StyledTextScreen()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct RoundedBackground: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(16)
            .background(Color.blue)
            .cornerRadius(10)
            .foregroundColor(.white)
    }
}

extension View {
    func roundedBackground() -> some View {
        self.modifier(RoundedBackground())
    }
}

struct StyledTextScreen: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .roundedBackground()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white)
        .ignoresSafeArea()
    }
}

struct StyledTextScreen_Previews: PreviewProvider {
    static var previews: some View {
        StyledTextScreen()
    }
}

We created a custom ViewModifier called RoundedBackground. It adds padding around the content, sets a blue background color, rounds the corners with a radius of 10, and changes the text color to white for contrast.

We also added a convenient extension on View to apply this modifier easily with .roundedBackground().

Inside the StyledTextScreen, we put a Text view with the string "Hello, SwiftUI!" and applied our custom modifier. The VStack centers the text vertically and horizontally by expanding to fill the screen.

This approach keeps styling reusable and clean, just like putting on a favorite jacket to look nice.

Final Result

Completed Screen

-------------------------
|                       |
|   Hello, SwiftUI!      |
|   (blue rounded box)   |
|                       |
-------------------------

The text 'Hello, SwiftUI!' is shown in white on a blue rounded rectangle.

The text is centered vertically and horizontally on the screen.

No user interaction is required; this is a static styled label.

Stretch Goal

Add a toggle button that switches the background color of the text between blue and green using the custom ViewModifier.

💡 Hint

Use a @State variable to track the color and pass it as a parameter to the ViewModifier.