Overlay and background modifiers in iOS Swift - Mini App: Build & Ship

Build: OverlayBackgroundDemo

This screen shows how to use overlay and background modifiers in SwiftUI to layer views and add backgrounds.

Target UI

-------------------------
|                       |
|   [Blue Rectangle]     |
|   with white Text      |
|   and red Circle       |
|                       |
-------------------------

Create a blue rectangle of size 200x100 points.

Add white text "Hello SwiftUI" centered inside the rectangle using overlay.

Add a small red circle (30x30 points) as an overlay aligned to the top-right corner of the rectangle.

Add a light gray rounded rectangle as the background behind the blue rectangle with corner radius 15.

Starter Code

iOS Swift

import SwiftUI

struct OverlayBackgroundDemo: View {
    var body: some View {
        // TODO: Add your code here
        Text("")
    }
}

struct OverlayBackgroundDemo_Previews: PreviewProvider {
    static var previews: some View {
        OverlayBackgroundDemo()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct OverlayBackgroundDemo: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 100)
            .overlay(
                Text("Hello SwiftUI")
                    .foregroundColor(.white)
                    .font(.headline)
            )
            .overlay(
                Circle()
                    .fill(Color.red)
                    .frame(width: 30, height: 30)
                    .offset(x: 85, y: -35), alignment: .topTrailing
            )
            .background(
                RoundedRectangle(cornerRadius: 15)
                    .fill(Color(white: 0.9))
                    .frame(width: 220, height: 120)
            )
    }
}

struct OverlayBackgroundDemo_Previews: PreviewProvider {
    static var previews: some View {
        OverlayBackgroundDemo()
    }
}

We start with a blue rectangle sized 200x100 points. We add the white text "Hello SwiftUI" centered on top using the overlay modifier. Then, we add a small red circle as another overlay aligned to the top-right corner by using alignment: .topTrailing and offsetting it slightly to position it nicely. Finally, we add a light gray rounded rectangle as the background behind the blue rectangle using the background modifier with a corner radius of 15 and slightly larger size to frame the blue rectangle visually.

This layering shows how overlays and backgrounds can be stacked to create rich UI designs in SwiftUI.

Final Result

Completed Screen

-------------------------
|  (red circle)          |
|       ●               |
|   -----------------   |
|  |                 |  |
|  |  Hello SwiftUI  |  |
|  |                 |  |
|   -----------------   |
|                       |
-------------------------

The screen shows a blue rectangle with white text centered.

A small red circle is visible at the top-right corner overlapping the rectangle.

A light gray rounded rectangle frames the blue rectangle as background.

Stretch Goal

Add a shadow to the blue rectangle to make it stand out more.

💡 Hint

Use the .shadow modifier on the blue rectangle with radius and offset parameters.