BoxOfficeWidgetEntryView.swift

struct BoxOfficeWidgetEntryView : View {
    var entry: Provider.Entry
    @Environment(\.widgetFamily) var family
    
    @ViewBuilder
    var body: some View {
        switch family {
        case .systemSmall:
            ZStack {
                moviePosterView()
                VStack(alignment: .leading, spacing: 4) {
                    Spacer()
                    Text(entry.movieInfo.name ?? "")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                        .bold()
                    
                    Text(entry.movieInfo.collection ?? "")
                        .font(.system(size: 17))
                        .foregroundColor(.white)
                }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
                .padding()
                .foregroundColor(.clear)        // Making rectangle transparent
                .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom))
            }
        case .systemMedium:
            ZStack {
                moviePosterView()
                VStack(alignment: .leading, spacing: 4) {
                    Spacer()
                    Text(entry.movieInfo.name ?? "")
                        .font(.system(size: 26))
                        .foregroundColor(.white)
                        .bold()
                    Text(entry.movieInfo.releaseDate ?? "")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                    Text(entry.movieInfo.collection ?? "")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
                .padding()
                .foregroundColor(.clear)        // Making rectangle transparent
                .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom))
            }
        case .systemLarge:
            ZStack {
                moviePosterView()
                VStack(alignment: .leading, spacing: 4) {
                    Spacer()
                    Text(entry.movieInfo.name ?? "")
                        .font(.system(size: 28))
                        .foregroundColor(.white)
                        .bold()
                    Text("\(entry.movieInfo.daysSinceRelease ?? 1) days collection: \(entry.movieInfo.collection ?? "")")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                        .bold()
                    Text("Released on: \(entry.movieInfo.releaseDate ?? "")")
                        .font(.system(size: 20))
                        .foregroundColor(.white)
                }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
                .padding()
                .foregroundColor(.clear)        // Making rectangle transparent
                .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom))
            }
        default:
            ZStack {
                moviePosterView()
                VStack(alignment: .leading, spacing: 4) {
                    Spacer()
                    Text(entry.movieInfo.name ?? "")
                        .font(.system(size: 24))
                        .foregroundColor(.white)
                        .bold()
                    
                    Text(entry.movieInfo.collection ?? "")
                        .font(.system(size: 16))
                        .foregroundColor(.white)
                }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
                .padding()
                .foregroundColor(.clear)        // Making rectangle transparent
                .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom))
            }
        }
    }
    
    func moviePosterView() -> some View {
        
        GeometryReader { geo in
            WebImage(url: URL(string:entry.movieInfo.posterUrl!))
                .resizable()
                .placeholder {
                    Image(uiImage: UIImage(named: "moviePlaceholder")!)
                }
                .indicator(.activity)
                .transition(.fade(duration: 0.5))
                .frame(width: geo.size.width)
        }
    }
}