Overlay and background modifiers in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a red background color to the Text view.

iOS Swift

Text("Hello World")
  .background([1])

Drag options to blanks, or click blank then click option'

AColor.blue

BColor.green

CColor.yellow

DColor.red

Attempts:

3 left

💡 Hint

Common Mistakes

Using the overlay modifier instead of background.

Passing a string instead of a Color.

The background modifier adds a background color behind the view. Here, Color.red sets a red background.

2fill in blank

medium

Complete the code to overlay a blue circle on top of the Text view.

iOS Swift

Text("Hello")
  .overlay(Circle().fill([1]).frame(width: 100, height: 100))

Drag options to blanks, or click blank then click option'

AColor.orange

BColor.blue

CColor.green

DColor.red

Attempts:

3 left

💡 Hint

Common Mistakes

Using background instead of overlay.

Forgetting to call fill on the Circle.

The overlay modifier places a view on top of another. Here, a blue circle is drawn over the text.

3fill in blank

hard

Fix the error in the code to correctly add a yellow background with 50% opacity.

iOS Swift

Text("SwiftUI")
  .background(Color.yellow[1])

Drag options to blanks, or click blank then click option'

A.opacity(0.5)

B(opacity: 0.5)

C.alpha(0.5)

D(alpha: 0.5)

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to pass opacity as a parameter inside parentheses.

Using .alpha which is not a SwiftUI method.

To set opacity on a color in SwiftUI, use the .opacity() modifier after the color.

4fill in blank

hard

Fill both blanks to overlay a rounded rectangle with a green stroke and add a gray background.

iOS Swift

Text("Overlay")
  .overlay(RoundedRectangle(cornerRadius: [1]).stroke([2]))
  .background(Color.gray)

Drag options to blanks, or click blank then click option'

A10

BColor.green

C5

DColor.blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color where a number is expected for corner radius.

Choosing the wrong color for the stroke.

The RoundedRectangle needs a corner radius number and a stroke color. Here, 10 and Color.green are correct.

5fill in blank

hard

Fill all three blanks to create a Text view with a blue background, overlay a red circle, and add padding of 20.

iOS Swift

Text("Hello")
  .background([1])
  .overlay(Circle().fill([2]))
  .padding([3])

Drag options to blanks, or click blank then click option'

AColor.blue

BColor.red

C20

DColor.green

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up colors for background and overlay.

Using padding without a number.

The background is set to blue, the overlay circle is red, and padding is 20 points.