How can I change background Color of Stepper in SwiftUI?

Question

I want to the change the background color for stepper but this code change the background color for text too. I want to change only the stepper's background color. please guide me to solve this issue.

    HStack {

    Text("Count : ")
        .font(.body)
        .foregroundColor(Color(.blue))

    Spacer()

    Stepper(value: self.$MyViewModel.MyModel.minCounts, in: 5...60) {

     Text("\(String(format: "%.0f",MyViewModel.MyModel.minCounts)) Mins")
         .font(.body)
         .foregroundColor(Color("font"))

    }
    .background(Color("Color1"))
}

Answer 1

You should give UIColor to Color;

Stepper(value: $age, in: 1...60)
        {
            Text("\(String(format: "%.0f",44.456)) Mins")
                .font(.body)
                .foregroundColor(Color("font"))
        }
        .background(Color(UIColor(named: "Color1")!))

You need to unwrap UIColor(named: "Color1") as it is an optional value. You can do it in different ways according to what you need. One solution might be like;

    let color1: UIColor = UIColor(named: "Color1") ?? .white
    var body: some View {
        HStack{
                Text("Count : ")
                    .font(.body)
                    .foregroundColor(Color(.blue))
        Spacer()
        Stepper(value: $age, in: 1...60)
        {
            Text("\(String(format: "%.0f",44.456)) Mins")
                .font(.body)
                .foregroundColor(Color("font"))
        }
        .background(Color(color1))
        
    }
}

Answer 2

my two cents as I arrived here for deeper need: to completely customise Stepper.

I searched a bit, then I found a nice tip from https://www.hackingwithswift.com/forums/100-days-of-swiftui/custom-stepper-view/13742

and I rewrote a bit more usable.

code is below.

Just a couple of notes:

• be careful using double, adding 0.1 20 times does NOT giver bad 2.. as upper bound.. (better with Ints, eventually replace Double)
• we can also customize icons, but not for a stepper similar to Apple one.

Coding logic: use 2 buttons, if in range, go up/down, and binding will propagate to main view.

//  Created by ing.conti on 30/07/22.
//

import SwiftUI

typealias CallBack = ( ()->() )?

struct StepperColors{
    let leftBtnColor: Color
    let rightBtnColor: Color
    let backgroundColor: Color
}

struct ColoredStepper: View {
    
    internal init(
        value: Binding<Double>,
        range: ClosedRange<Double>, step: Double,
        onIncrement: CallBack, onDecrement: CallBack,
        stepperColors: StepperColors) {
            _value = value
            self.range = range
            self.step = step
            self.onIncrement = onIncrement
            self.onDecrement = onDecrement
            self.stepperColors = stepperColors
            
        } // init
    
    @Binding private var value: Double
    private let range: ClosedRange<Double>
    private let step: Double
    private let onIncrement: CallBack
    private let onDecrement: CallBack
    private let stepperColors: StepperColors
        
    
    private func checkValue(){
        if value < range.lowerBound {
            value = range.lowerBound
        } else if value > range.upperBound {
            value = range.upperBound
        }
    }
    

    var body: some View {
            HStack {
                
                Button {
                    decrement()
                } label: {
                    Image(systemName: "minus")
                        .frame(width: 38, height: 35)
                }
                .foregroundColor(stepperColors.leftBtnColor)
                .background(stepperColors.backgroundColor)

                Spacer().frame(width: 2)
                
                Button {
                    increment()
                } label: {
                    Image(systemName: "plus")
                        .frame(width: 44, height: 35) // DONT ask WHY different from previous, apple bug.
                }
                .foregroundColor(stepperColors.rightBtnColor)
                .background(stepperColors.backgroundColor)
            }// HStack
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .onAppear(perform: checkValue)
                       
    }// View
    
    func decrement() {
        if value >= range.lowerBound + step {
            value -= step
            onDecrement?()
        }
    }
    
    func increment() {
        if value + step <= range.upperBound {
            value += step
            onIncrement?()
        }
    }
}


struct ContentView: View {
    @State private var value = 0.1
    
    private let stepperColors = StepperColors(leftBtnColor: .red, rightBtnColor: .green, backgroundColor: .white)
    var body: some View {
        
        VStack{
            ColoredStepper( value: $value, range: 1.0...2.01, step: 0.1,
                           onIncrement: { print("Incremented") },
                            onDecrement: { print("Decremented")},
                            stepperColors: stepperColors )

            let text = "\(value.formatted())"
            Text(text)
            Spacer()

            }
        
    }
    
}