SwiftUI Simple Food Delivery App UI Design

SwiftUI Simple Food Delivery App UI Design

ContentView.swift

 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        VStack {
            ZStack (alignment: .leading) {
                VStack (alignment: .leading) {
                    HStack {
                        Image(systemName: "line.3.horizontal")
                            .resizable()
                            .frame(width: 24, height: 24)
                        
                        Spacer()
                        
                        Image(systemName: "magnifyingglass").resizable()
                            .frame(width: 24, height: 24)
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.secondary)
                            .clipShape(Circle())
                            .shadow(radius: 8)
                    }
                    Text("Food Bazzar").font(.title).foregroundColor(.secondary)
                    Text("15 Results").font(.title).foregroundColor(.primary)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                        HStack (spacing: 20) {
                            FoodItem()
                            FoodItem()
                        }
                    }
                }

            }.padding().edgesIgnoringSafeArea(.bottom)
            
            Button(action: {}) {
                Image(systemName: "cart").resizable().frame(width: 12, height: 12).padding().background(Color.yellow).clipShape(Circle()).padding()
                Text("4 items").foregroundColor(.white).padding(.horizontal)
            }.background(Color.black.opacity(0.8)).clipShape(Capsule())
                .shadow(color: Color.black.opacity(0.2), radius: 2, x: 0, y: 20)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

FoodItem.swift

 
//
//  FoodItem.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct FoodItem: View {
    var body: some View {
        VStack (alignment: .leading) {
            HStack {
                Image(systemName: "flame.fill").resizable().frame(width: 16, height: 16).foregroundColor(.red)
                Text("Very Hot").font(.footnote).foregroundColor(.primary)
            }
            Image("pic").resizable().aspectRatio(contentMode: .fill).frame(width: 100, height: 100)
            
            Text("Classic").font(.headline)
            Text("Platter").foregroundColor(.secondary).font(.subheadline).padding(.bottom, 12)
            Text("$25.99").font(.title)
        }
        .frame(width: 160, height: 250).background(Color.secondary.opacity(0.3)).cornerRadius(12)
    }
}

struct FoodItem_Previews: PreviewProvider {
    static var previews: some View {
        FoodItem()
    }
}