article

Thursday, May 5, 2022

SwiftUI Dessert App UI

SwiftUI Dessert App UI
ContentView.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//
//  ContentView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct ContentView: View {
  
    @State private var showDetails = false
    @State private var selectedItem = dessertData[0]
     
    var body: some View {
        NavigationView {
            ZStack {
                Color("Color")
                VStack {
                    HomeTopBar()
                    SearchBarView()
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack {
                            ForEach(dessertData, id: \.self) { item in
                                Button(action: {
                                    showDetails = true
                                    selectedItem = item
                                }, label: {
                                    DessertItemView(item: item)
                                })
                            }
                            .background(
                            NavigationLink(
                                destination: DessertDetails(dessert: selectedItem)
                                    .navigationBarBackButtonHidden(true), isActive: $showDetails) {
                                    EmptyView()
                                }
                            )
                        }
                    }
                    Spacer()
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}
 
struct DessertItemView: View {
    var item: Dessert
     
    var body: some View {
        ZStack(alignment: .topLeading) {
            HStack(spacing: 16) {
                Image(item.image)
                    .resizable()
                    .scaledToFill()
                    .clipShape(Circle())
                    .frame(width: 80, height: 80)
                   
                VStack(alignment: .leading) {
                    Text(item.name)
                        .font(.system(size: 16, weight: .regular))
                        .padding(.trailing, 20)
                        .foregroundColor(.gray)
                }
                Spacer()
                   
                Text(item.price)
                    .font(.system(size: 14, weight: .semibold))
                    .padding()
                    .foregroundColor(.green)
                 
            }
        }
        .background(Color.white)
        .cornerRadius(40)
        .padding(.horizontal, 20)
        .padding(.vertical,5)
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
HomeTopBar.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//
//  HomeTopBar.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct HomeTopBar: View {
     
    var height = UIScreen.main.bounds.height
     
    var body: some View {
        HStack{
            Text("Home")
                .fontWeight(.bold)
                .frame(alignment: .center)
                .navigationBarItems(
                    leading:
                        Button(action: {}) {
                            Image(systemName: "slider.horizontal.3")
                                .font(.title)
                                .padding(.horizontal)
                        }
                    )
        }
        .foregroundColor(Color.black)
        .padding()
        .padding(.top, height < 750 ? 0 : 50)
    }
}
 
struct HomeTopBar_Previews: PreviewProvider {
    static var previews: some View {
        HomeTopBar()
    }
}
SearchBarView.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//
//  SearchBarView.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct SearchBarView: View {
     
    @State var searchKey: String = ""
     
    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundColor(.black)
                .padding()
            TextField("Search ...", text: $searchKey)
        }
        .background(Color.white)
        .cornerRadius(30)
        .padding(.horizontal, 25)
        .padding(.bottom)
    }
}
 
struct SearchBarView_Previews: PreviewProvider {
    static var previews: some View {
        SearchBarView()
    }
}
DessertDetails.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
//
//  DessertDetails.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import SwiftUI
 
struct DessertDetails: View {
    @Environment(\.presentationMode) var presentationMode
    @State var dessert: Dessert = dessertData[2]
    var body: some View {
        VStack(alignment: .leading) {
            Header(image: dessert.image)
            VStack(alignment: .leading) {
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(alignment: .leading) {
                        Text(dessert.name)
                            .foregroundColor(.primary)
                            .font(.title)
                            .fontWeight(.bold)
                            .padding(.horizontal)
                            .padding(.vertical, 10)
                        HStack {
                            Text(dessert.price)
                                .font(.title3)
                                .fontWeight(.bold)
                             
                            Spacer()
                            AmountView()
                        }
                        .padding(.horizontal)
                         
                        HStack {
                            SubInfoView(image: "car", info: "Free Delivery")
                            Spacer()
                            SubInfoView(image: "timer", info: "20min")
                        }
                        .padding(.top, 20)
                        .padding()
                         
                        Text("Description :")
                            .fontWeight(.medium)
                            .padding(.horizontal)
                         
                        Text(dessert.description)
                            .foregroundColor(.gray)
                            .fontWeight(.light)
                            .padding()
                    }
                     
                }
            }
             
            Button(action: {
                 
            }) {
                Text("Add to Cart")
                    .foregroundColor(.white)
            }
            .padding()
            .frame(width: UIScreen.main.bounds.width / 1.1)
            .background(Color.green)
            .cornerRadius(35)
            .padding()
             
            Spacer()
        }
        .edgesIgnoringSafeArea(.all)
        .statusBar(hidden: true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    Image(systemName: "chevron.backward")
                        .imageScale(.large)
                }
             }
             ToolbarItem(placement: .navigationBarTrailing) {
                 Button(action: {
                                         
                 }) {
                     Image(systemName: "heart")
                         .imageScale(.large).foregroundColor(.red)
                 }
             }
        })
    }
}
 
struct SubInfoView: View {
    var image: String
    var info: String
    var body: some View {
        HStack(spacing: 8) {
            Image(systemName: image)
            Text(info)
        }
    }
}
 
struct AmountView: View {
     
    @State var count = 1
     
    var body: some View {
        HStack {
            Button(action: {
                if self.count != 0{
                    self.count -= 1
                }
            }) {
                Text("-")
                    .font(.title)
                    .foregroundColor(.black)
                    .frame(width: 35, height: 35)
                    .background(Circle().stroke().foregroundColor(Color.green))
            }
             
            Text("\(self.count)")
                .font(.title2)
                .fontWeight(.bold)
             
            Button(action: {
                self.count += 1
            }) {
                Text("+")
                    .font(.title)
                    .foregroundColor(.black)
                    .frame(width: 35, height: 35)
                    .background(Circle().stroke().foregroundColor(Color.green))
            }
        }
    }
}
 
struct Header: View {
    var image: String
    var body: some View {
        ZStack(alignment: .top) {
            Image(image)
                .resizable()
                .scaledToFill()
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2)
                .cornerRadius(45)
        }
    }
}
 
struct DessertDetails_Previews: PreviewProvider {
    static var previews: some View {
        DessertDetails()
    }
}
Model.swift
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//  Model.swift
//  SwiftUIProject
//
//  Created by Cairocoders
//
 
import Foundation
 
struct Dessert: Identifiable, Hashable {
    public var id: Int
    public var image: String
    public var name: String
    public var price: String
    public var description: String
}
 
var dessertData = [
    Dessert(id: 0, image: "desert1", name: "Leche Flan", price: "$2.99", description: "Leche Flan is a dessert made-up of eggs and milk with a soft caramel on top. It resembles crème caramel and caramel custard."),
    Dessert(id: 1, image: "desert2", name: "Maja Blanca", price: "$2.02", description: "Maja Blanca is a Filipino dessert made from coconut milk, cornstarch, and sugar. Often called Coconut Pudding, this luscious dessert is easy to make"),
    Dessert(id: 2, image: "desert3", name: "Yema", price: "$1.00", description: "Yema is a type of Filipino candy named after the Spanish term for egg yolks. I don't see the reason as to why not because egg yolk is a major ingredient "),
    Dessert(id: 3, image: "desert4", name: "Ube Halaya", price: "$3.99", description: "Ube Halaya or is a type of Filipino jam made from purple yam. It's commonly served as a midday snack or after-meal dessert"),
    Dessert(id: 4, image: "desert5", name: "Buko Salad", price: "$1.99", description: "The Buko Salad Recipe is prepared with young shredded coconut, canned fruits, cream and sweetened milk. A very popular dessert in every parties or occasion."),
    Dessert(id: 5, image: "desert6", name: "Polvoron", price: "$0.99", description: "Polvoron is a type of shortbread popular in Spain and its former colonies in Latin America and the Philippines."),
    Dessert(id: 6, image: "desert7", name: "Pastillas", price: "$0.85", description: "Pastillas de leche are sweet milk candies that are usually served for dessert. An authentic recipe will require the use of Carabao's"),
    Dessert(id: 7, image: "desert8", name: "Cassava Cake", price: "$1.99", description: "Cassava Cake is a classic Filipino dessert made from grated cassava (manioc). Cassava is also known as kamoteng kahoy and balinghoy"),
]

Posted by ednalan at 12:11 AM . Under .

Related Post