Stepper in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Stepper with a label showing its value.

iOS Swift

struct ContentView: View {
  @State private var value = 0
  var body: some View {
    Stepper("Value: \(value)", value: $value, in: 0...10) [1]
  }
}

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

A.onChange(of: value) { newValue in print(newValue) }

B.background(Color.gray)

C.padding()

D.disabled(true)

Attempts:

3 left

💡 Hint

Common Mistakes

Using .disabled(true) disables the Stepper, which is not intended here.

Using .background(Color.gray) changes background but does not add space.

The .padding() modifier adds space around the Stepper for better appearance.

2fill in blank

medium

Complete the code to limit the Stepper's value between 1 and 5.

iOS Swift

Stepper("Count: \(count)", value: $count, in: [1]) 
  .padding()

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

A5...10

B1...5

C-5...5

D0...10

Attempts:

3 left

💡 Hint

Common Mistakes

Using a range that includes 0 when minimum should be 1.

Using an open range like 1..<5 which excludes 5.

The range 1...5 limits the Stepper's value between 1 and 5 inclusive.

3fill in blank

hard

Fix the error in the Stepper binding to update the value correctly.

iOS Swift

@State private var stepValue = 0

var body: some View {
  Stepper("Step: \(stepValue)", value: [1], in: 0...10)
    .padding()
}

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

AstepValue$

BstepValue

C&stepValue

D$stepValue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable directly without $ causes a compile error.

Using &stepValue is invalid syntax in SwiftUI.

Use $stepValue to pass a binding to the Stepper so it can update the state.

4fill in blank

hard

Fill both blanks to create a Stepper that increments by 2 and shows the value.

iOS Swift

Stepper("Value: \(value)", value: $value, in: 0...20, step: [1]) [2]

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

A2

B.padding()

C.background(Color.blue)

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using step 1 instead of 2 changes the increment amount.

Forgetting to add padding makes the UI cramped.

The step: 2 makes the Stepper increase by 2 each tap, and .padding() adds space around it.

5fill in blank

hard

Fill all three blanks to create a Stepper with a label, binding, and range.

iOS Swift

struct StepperView: View {
  @State private var count = 0
  var body: some View {
    Stepper([1], value: [2], in: [3])
      .padding()
  }
}

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

A"Count: \(count)"

B$count

C0...10

D"Value: count"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain string without interpolation for the label.

Passing count instead of $count for the binding.

Using an incorrect range like 1...5.

The label shows the current count, the binding uses $count, and the range limits values from 0 to 10.