I’m trying to make a linear progression bar that will show the progress based on the current value from the goal value. For instance, if my current step count is 7,500 steps and my goal step count is 10,000, I would like the bar to be filled up 75% out of 100% and so forth. I can display the percentage in a Text view but I’m having issues with it being dynamic. I’ve used the trim method on the progress bar based on the value and goal but nothing is changing. Any suggestions will be appreciated!
Here is the Linear Progress View
struct ProgressionStepBar: View {
let value: Int
let goalValue: Int
var color1: Color = .mint
var color2: Color = .green
var body: some View {
ZStack(alignment: .leading) {
Capsule()
.fill(Color.black.opacity(0.1))
.frame(height: 18)
Capsule()
.trim(from: 0, to: CGFloat(self.value) / CGFloat(self.goalValue))
.frame(width: 250, height: 18)
.background(
LinearGradient(gradient: Gradient(colors: [color1, color2]), startPoint: .leading, endPoint: .trailing).clipShape(Capsule())
)
.foregroundColor(.clear)
}
}
}
Here is the view to display the information. I’m using my ViewModel to get the step count
@StateObject var healthStore = HealthStoreViewModel()
//This is a computed property from the view model to get the current step count.
var currentStepCount: Int {
steps.last?.count ?? 0
}
VStack {
Image(systemName: "figure.walk")
.font(.largeTitle)
Text("\(healthStore.currentStepCount) steps")
HStack {
Text("Goal: 10,000 steps")
.font(.caption)
Spacer()
Text("\(healthStore.stepCountPercent)%")
.font(.caption)
}
ProgressionStepBar(value: healthStore.currentStepCount, goalValue: 10_000)
}