Widget preview is using wrong size family

Question

I have a widget view looking like this:

struct WidgetEntryView: View {
    var entry: Provider.Entry

    @Environment(\.widgetFamily) var family
    
    var body: some View {
        switch family {
        case .systemSmall:
            ZStack {
                VStack(spacing: 12) {
                    // ...
                }
                .padding(10)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .background(Color.red.edgesIgnoringSafeArea(.all))
        case .systemMedium:
            ZStack {
                VStack(spacing: 12) {
                    // ...
                }
                .padding(10)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .background(Color.blue.edgesIgnoringSafeArea(.all))
        default:
            ZStack {
                VStack(spacing: 12) {
                    // ...
                    
                }
                .padding(10)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .background(Color.black.edgesIgnoringSafeArea(.all))
        }
    }
}

The widget supports all 3 main size families:

struct MyWidget: Widget {
    let kind: String = "MyWidget"
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            WidgetEntryView(entry: entry)
        }
        .configurationDisplayName("MyWidget")
        .description("...")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

And here's my PreviewProvider:

struct Widget_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            WidgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent())
                .previewContext(WidgetPreviewContext(family: .systemSmall))
            WidgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent())
                .previewContext(WidgetPreviewContext(family: .systemMedium))
            WidgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent())
                .previewContext(WidgetPreviewContext(family: .systemLarge))
        }
    }
}

So I have a preview for each size family on the canvas, but for some reason, all of them are rendered with a blue background. Or in other words, all of them are rendered as a .systemMedium family. When I actually run the widget on the simulator, it has the correct look. Why does the preview always skip to the .systemMedium case and ignores the other ones? How can I fix this?

Answer 1

The @Environment var did not work for previews. But you can use an environment modifier like this:

YourWidgetView()
   .previewContext(WidgetPreviewContext(family: .systemSmall))
   .environment(\.widgetFamily, .systemSmall)

But you have to write an EnvironmentKey extension. This is the solution i used: How to set widgetFamily environment