Widget preview is using wrong size family - ios

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