I'm building a widget with WidgetKit.
On iOS 17 the background works fine, however, on any version below that (say 16), there are gaps on the vertical axis.
Here's the code that's causing this issue:
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
let color = entry.widgetData.bgColor
if #available(iOS 17.0, *) {
homeWidgetEntryView(entry: entry)
.containerBackground(.linearGradient(AnyGradient(Gradient(colors: [color, color.lighten(percent: 5) , color.lighten(percent: 15)])), startPoint: .top, endPoint: .bottom), for: .widget)
} else {
homeWidgetEntryView(entry: entry)
// this is the padding that's missing to fill the small widget's area, however this also streches the content to the edges
// .padding(.vertical, 20)
// .padding(.horizontal, 8)
.background(LinearGradient(colors: [color, color.lighten(percent: 5) , color.lighten(percent: 15)], startPoint: .top, endPoint: .bottom))
}
}
.supportedFamilies([.systemSmall])
}
Screenshot:
From the documentation for background(alignment:content:)
:
Layers the views that you specify behind this view.
It only fills the background of the view, so its size will exactly match the size of the view it's applied to.
You need to use .frame(maxHeight: .infinity)
for the modifier to fill the whole view:
homeWidgetEntryView(entry: entry)
.frame(maxHeight: .infinity)
.background(LinearGradient(colors: [color, color.lighten(percent: 5) , color.lighten(percent: 15)], startPoint: .top, endPoint: .bottom))