In this video we will create a progressive circuit fitness dashboard with SwiftUI

Subscribe: https://www.youtube.com/c/Cairocoders/featured

Source Code

ContentView.swift

//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//
 
import SwiftUI
 
 
struct ContentView: View {
    var body: some View {
        Home()
    }
}
 
struct Home : View {
       
    var columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2)
     
    var body: some View{
        GeometryReader { geometry in
            ZStack {
                Image("bg2")
                    .resizable()
                    .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                 
                ScrollView(.vertical, showsIndicators: false) {
                    VStack{
                        HStack{
                            Text("Hello Cairocoders")
                                .font(.title)
                                .fontWeight(.bold)
                                .foregroundColor(.white)
                             
                            Spacer(minLength: 0)
                             
                            Button(action: {}) {
                                 
                                Image(systemName: "slider.horizontal.3")
                                    .renderingMode(.template)
                                    .foregroundColor(.white)
                            }
                        }//End HStack
                        .padding()
                         
                        HStack{
                            Text("Stats Today")
                                .font(.title)
                                .fontWeight(.bold)
                                .foregroundColor(.white)
                             
                            Spacer(minLength: 0)
                             
                            Text(Date(), style: .date)
                                .foregroundColor(.white)
                        }//End HStack
                        .padding()
                         
                        LazyVGrid(columns: columns,spacing: 30){
                             
                            ForEach(stats_Data){stat in
                                VStack(spacing: 32){
                                     
                                    HStack{
                                        Text(stat.title)
                                            .font(.system(size: 22))
                                            .fontWeight(.bold)
                                            .foregroundColor(.white)
                                         
                                        Spacer(minLength: 0)
                                    }
                                     
                                    ZStack{
                                        Circle()
                                            .trim(from: 0, to: 1)
                                            .stroke(Color.gray, lineWidth: 10)
                                            .frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
                                         
                                        Circle()
                                            .trim(from: 0, to: (stat.currentData / stat.goal))
                                            .stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
                                            .frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
                                         
                                        Text(getPercent(current: stat.currentData, Goal: stat.goal) + " %")
                                            .font(.system(size: 22))
                                            .fontWeight(.bold)
                                            .foregroundColor(Color.white)
                                            .rotationEffect(.init(degrees: 90))
                                    }
                                    .rotationEffect(.init(degrees: -90))
 
                                    Text(getDec(val: stat.currentData) + " " + getType(val: stat.title))
                                        .font(.system(size: 22))
                                        .foregroundColor(.white)
                                        .fontWeight(.bold)
                                }
                                .padding()
                                .background(Color.white.opacity(0.19))
                                .cornerRadius(15)
                                .shadow(color: Color.white.opacity(0.2), radius: 10, x: 0, y: 0)
                            }
                        }
                        .padding()
                    }
                }//End Scrollview
            }//End ZStack
        }//End GeometryReader
    }
}
 
// calculating Type...
func getType(val: String)->String{
    switch val {
    case "Water": return "L"
    case "Pushups": return "Pu"
    case "Running": return "Km"
    case "Cycling": return "Km"
    case "Steps": return "stp"
    default: return "Kcal"
    }
}
 
// converting Number to decimal...
func getDec(val: CGFloat)->String{
    let format = NumberFormatter()
    format.numberStyle = .decimal
    return format.string(from: NSNumber.init(value: Float(val)))!
}
 
// calculating percent...
func getPercent(current : CGFloat,Goal : CGFloat)->String{
    let per = (current / Goal) * 100
    return String(format: "%.1f", per)
}
 
struct Stats : Identifiable {
    var id : Int
    var title : String
    var currentData : CGFloat
    var goal : CGFloat
    var color : Color
}
 
var stats_Data = [
    Stats(id: 0, title: "Running", currentData: 7.5, goal: 15, color: Color.blue),
    Stats(id: 1, title: "Water", currentData: 3.5, goal: 5, color: Color.green),
    Stats(id: 2, title: "Calories", currentData: 1230, goal: 2000, color: Color.orange),
    Stats(id: 3, title: "Pushups", currentData: 45, goal: 100, color: Color.red),
    Stats(id: 4, title: "Cycling", currentData: 12.5, goal: 25, color: Color.blue),
    Stats(id: 5, title: "Steps", currentData: 6423, goal: 10000, color: Color.orange),
]
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

#swiftui #mobile-apps