Stepper in SwiftUI - Swift Shorts

Today, we’re going to dive deep into the Stepper control – a versatile and user-friendly way to increment or decrement values in your SwiftUI apps. We’ll explore various ways to implement and customize Steppers, from basic usage to more advanced techniques.

What is a Stepper?

A Stepper in SwiftUI is a control that lets users increase or decrease a value incrementally. It’s perfect for adjusting quantities, settings, or any numeric value that changes in fixed steps.

Basic Stepper Usage

Let’s start with the simplest implementation of a Stepper:

Swift

struct ContentView: View { 

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

This creates a Stepper that allows the user to change value between 0 and 10. The current value is displayed in the label.

Stepper with Custom Step

You can customize the increment/decrement step:

Swift

Stepper(value: $value, in: 0...100, step: 5) { 
    Text("Value: \(value)") 
}

This Stepper changes the value by 5 each time it’s tapped.

Stepper with onIncrement and onDecrement

For more control, you can use the onIncrement and onDecrement closures:

Swift

struct ContentView: View { 

    @State private var value = 0 
    
    var body: some View { 
        Stepper { 
            Text("Value: \(value)") 
        } onIncrement: { 
            value += 1 
            print("Incremented to \(value)") 
        } onDecrement: { 
            value -= 1 
            print("Decremented to \(value)")
        } 
    } 
}

This approach allows you to perform additional actions when the value changes.

Stepper with Formatting

You can format the displayed value:

Swift

struct ContentView: View { 

    @State private var temperature = 20.0 
    
    var body: some View { 
        Stepper { 
            Text("Temperature: \(temperature, specifier: "%.1f")°C") 
        } onIncrement: { 
            temperature += 0.1 
        } onDecrement: { 
            temperature -= 0.1 
        } 
    } 
}

This Stepper displays the temperature with one decimal place.

Binding a Stepper to an Optional Value

Sometimes, you might need to bind a Stepper to an optional value. Here’s how you can do it:

Swift

struct ContentView: View { 

    @State private var optionalValue: Int? = 5 
    
    var body: some View { 
        Stepper(
            value: Binding( 
                get: { self.optionalValue ?? 0 }, 
                set: { self.optionalValue = $0 } 
            ), 
            in: 0...10
        ) { 
            Text("Value: \(optionalValue ?? 0)") 
        } 
    } 
}

This creates a custom binding that handles the optional value.

Stepper with Custom Increment Logic

You can implement custom logic for increments and decrements:

Swift

struct ContentView: View { 

    @State private var value = 5 
    
    var body: some View { 
        Stepper { 
            Text("Value: \(value)") 
        } onIncrement: { 
            value = min(value * 2, 100) 
        } onDecrement: { 
            value = max(value / 2, 0) 
        } 
    } 
}

This Stepper doubles the value on increment and halves it on decrement, with limits of 0 and 100.

Stepper in a Form

Steppers are often used in forms for settings:

Swift

struct ContentView: View { 

    @State private var volume = 5 
    @State private var brightness = 50 
    
    var body: some View { 
        Form { 
            Section(
                header: Text("Audio Settings")
            ) { 
                Stepper(
                    "Volume: \(volume)", 
                    value: $volume, 
                    in: 0...10
                ) 
            } 
            Section(
                header: Text("Display Settings")
            ) { 
                Stepper(
                    "Brightness: \(brightness)%", 
                    value: $brightness, 
                    in: 0...100, 
                    step: 5
                ) 
            } 
        } 
    } 
}

This creates a settings-like interface with Steppers for volume and brightness.

Stepper with Custom Styling

While SwiftUI doesn’t provide built-in styling options for Steppers, you can create custom styles by wrapping the Stepper in your own view:

Swift

struct CustomStepperStyle: ViewModifier { 

    func body(content: Content) -> some View { 
        content 
            .padding() 
            .background(Color.blue.opacity(0.1)) 
            .cornerRadius(8) 
    } 
} 

struct ContentView: View { 

    @State private var value = 0 

    var body: some View { 
        Stepper(value: $value, in: 0...10) { 
            Text("Value: \(value)") 
        } 
        .modifier(CustomStepperStyle()) 
    } 
}

This applies a custom background and corner radius to the Stepper.

Stepper with Disabled State

You can disable a Stepper based on certain conditions:

Swift

struct ContentView: View { 

    @State private var value = 0 

    var body: some View { 
        Stepper(value: $value, in: 0...10) { 
            Text("Value: \(value)") 
        } 
        .disabled(value == 10) 
    } 
}

This Stepper becomes disabled when the value reaches 10.

That’s it folks. These are enough examples to get you started. Stay tuned for more.