How to remove padding around the content view and let the content view fill the entire area in Widget iOS 17+ and MacOS Sonoma?

Question

I tried using .ignoresSafeArea() , but did not work.

There were not a padding in iOS 16 and early versions around the content view.

struct CommonDailyEyeTipsWidget: Widget {
    let kind: String = "CommonDailyEyeTipsWidget"

    init() {
        //setup firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .ignoresSafeArea() // Does not work
                .containerBackground(.accent, for: .widget)
            
        }
        .contentMarginsDisabled()
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

Godsend

Answer 1

Yes, Safe areas in widgets have been replaced by the use of content margins. This means that modifiers like ignoresSafeArea no longer have any effect in widgets.

you can still achieve this same effect by adding the contentMarginsDisabled modifier to your widget configuration.

struct CommonDailyEyeTipsWidget: Widget {
    let kind: String = "CommonDailyEyeTipsWidget"

    init() {
        //setup firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .containerBackground(.accent, for: .widget)
        }
        .contentMarginsDisabled() // Here
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

NOTE: for any content which should remain within the default content margins, simply add padding back in. You can use the widgetContentMargins environment variable to get the default margins for the current environment.

Ex:

struct CommonDailyEyeTipsWidgetEntryView : View {
    @Environment(\.widgetContentMargins) var margins
    
    var entry: Provider.Entry
    
    var body: some View {
        Rectangle()
            .foregroundStyle(Color.primary)
            .padding(margins) // If you want a margin 
    }
}

---

Content Margin

Content margins are padding which is automatically applied to your widget's body, preventing your content from getting to close to the edge of the widget container. These margins may be larger or smaller, depending on the environment where your widget is being shown.

Godsend

This also works for Apple Watch rectangular complications. Many thanks! – Diphenyl

Answer 2

Also since margins have appeared since iOS 17, you can use this extension in case you need to support lower versions and disable margins at all.

extension WidgetConfiguration {
    func disableContentMarginsIfNeeded() -> some WidgetConfiguration {
        if #available(iOSApplicationExtension 17.0, *) {
            return self.contentMarginsDisabled()
        } else {
            return self
        }
    }
}

Example of usage:

struct CustomWidget: Widget {
    private let kind: String = "CustomWidget"
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind,
                            intent: YourCustomIntent.self,
                            provider: YourCustomTimelineProvider()) { entry in
            YourCustomView(entry: entry)
        }
        .configurationDisplayName("Name of widget")
        .description("Description")
        .disableContentMarginsIfNeeded() // add to your widget configuration
    }
}

Lyric

Clean solution, thank you! – Suzansuzann

Actually, there's no need to do iOS 17 checking to use .contentMarginsDisabled(). As the doc said: "This modifier has no effect on operation system versions prior to iOS 17, watchOS 10, or macOS 14." – Galvanism

@Galvanism Good point. Extension will be useful for those who needs to support iOS version below 15. – Lyric