404 Error Screen in SwiftUI | UIUX design

404 Error page or Empty states occur when an item’s content can’t be shown.

For example, they can include a list without list items, or a search that returns no results. Although these states aren’t typical, they should be designed to prevent confusion.

Let us see some demo '404 Error' page in SwiftUI

import SwiftUI

struct ErrorScreen404: View {
    var body: some View {
        ZStack (alignment: Alignment(horizontal: .leading, vertical: .bottom)) {
            let resourceImage = #imageLiteral(resourceName: "8_404 Error")
            Image(uiImage: resourceImage)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            VStack (alignment: .leading, spacing: 30) {
                Text("Dead End")
                    .font(.largeTitle)
                    .foregroundColor(.white)
                
                Text("Opps! Tha page you are looking \nfor doesn’t exist...")
                    .fontWeight(.semibold)
                    .foregroundColor(.white)
                    .opacity(0.7)
                
                Button(action: {
                    
                }) {
                    Text("Home".uppercased())
                        .fontWeight(.semibold)
                        .foregroundColor(.black)
                        .padding(.vertical)
                        .padding(.horizontal, 30)
                        .background(Capsule().foregroundColor(.white))
                }
            }
            .padding(.horizontal, 70)
            .padding(.bottom, UIScreen.main.bounds.height * 0.1)
        }
    }
}

struct ErrorScreen404_Previews: PreviewProvider {
    static var previews: some View {
        ErrorScreen404()
    }
}

..

Demo 2: 

import SwiftUI

struct Error404: View {
    var body: some View {
        ZStack (alignment: Alignment(horizontal: .center, vertical: .bottom)) {
            
            let resourceImage = #imageLiteral(resourceName: "2_404 Error")
            Image(uiImage: resourceImage)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            VStack (alignment: .center, spacing: 30) {
                Text("Page Not Found")
                    .font(.title)
                
                Text("The page you are looking for doesn’t seem to exist…")
                    .multilineTextAlignment(.center)
                    .opacity(0.7)
                
                Button(action: {
                    
                }) {
                    Text("Go Home".uppercased())
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                        .padding(.vertical)
                        .padding(.horizontal, 30)
                        .background(Capsule().foregroundColor(.blue))
                }
            }
            .padding(.horizontal, 70)
            .padding(.bottom, UIScreen.main.bounds.height * 0.1)
        }
    }
}

struct Error404_Previews: PreviewProvider {
    static var previews: some View {
        Error404()
    }
}

..