New SwiftUI: Step Counter UI using Xcode 14

Photo by John Arano on Unsplash

Hello everyone, welcome to a new SwiftUI tutorial. I hope you are all doing well. Today I am going to show you how to design a step counter ui in SwiftUI 4 and Xcode 14.

Let’s get started with opening up Xcode 14. We going to create a new SwiftUI file called Data, here we are going to add the move amount and step count. We are going to be using SF symbols for the images here.

import SwiftUI

let data = [
    DataItem(imageName: "drop.fill", imageColor: Color.blue, value: "0", unit: "Mile"),
    DataItem(imageName: "flame.fill", imageColor: Color.orange, value: "0", unit: "Kcal"),
    DataItem(imageName: "stopwatch.fill", imageColor: Color.green, value: "0\u{1D0D}", unit: "Time")
]

struct DataItem {
    let id = UUID()
    let imageName: String
    let imageColor: Color
    var value: String
    let unit: String
}

struct StepData {
    var count: Int = 0
    var mileCount: CGFloat = 0
    var caloryCount: Int = 0
    var minuteCount: Int = 0
    var goal: Int
}

We are also going to be using our own colours here too so we are going to create a ColorConstants file.

import SwiftUI

struct ColorConstants {
    static let topColor1 = Color.init(red: 31/255, green: 15/255, blue: 119/255)
    static let topColor2 = Color.init(red: 12/255, green: 39/255, blue: 186/255)
    static let bottomColor1 =…