Full size AccessoryWidgetBackground() in accessoryRectangular family

userarD5 0
Viewed 49

I'd like to add a full size AccessoryWidgetBackground() to an accessoryRectangular widget family.

I made a brand new project and added a brand new widget. Then I changed the view to:

struct Some_WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        AccessoryWidgetBackground()
            .frame(width: .infinity, height: .infinity)
            .ignoresSafeArea()
            
    }
}

iOS 16 widget selection Here's what I get:

Is there a way to take up the whole view with the background blur?

widgetkit swift
2 Answers

The answer to the question as posed is: this is not possible in iOS 16.0, the view is cropped as can be seen from the inner box in the image in the question.

The workaround I settled for is to create a rounded background view and add it in a ZStack:

var body: some View {
    ZStack {
        OptionalBlurView(showBlur: true)
        // etc

Here's the background view, it works in previews too.

@available(iOSApplicationExtension 16.0, *)
struct OptionalBlurView: View {
    
    var showBlur: Bool
        
    @Environment(\.widgetFamily) var family
    
    var body: some View {
        if showBlur {
            blurView
        } else {
            EmptyView()
        }
    }
    
    var blurView: some View {
#if targetEnvironment(simulator)
        // at the time of coding, AccessoryWidgetBackground does not show in previews, so this is an aproximation
        switch family {
        
        case .accessoryCircular:
            return Circle()
                .opacity(0.3)
                .eraseToAnyView()
        default:
            return Rectangle()
                .clipShape(RoundedRectangle(cornerSize: CGSize(width: 10, height: 10), style: .continuous))            
                .opacity(0.3)
                .eraseToAnyView()
        }
    
#else
        AccessoryWidgetBackground()
            .clipShape(RoundedRectangle(cornerSize: CGSize(width: 10, height: 10), style: .continuous))
            .opacity(0.7)
#endif
    }
    
}
userarD50

Here is a possible solution. Tested with Xcode 11.4 / iOS 13.4

struct Some_WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            Color.clear.edgesIgnoringSafeArea(.all) // << here !!
            AccessoryWidgetBackground()
                .edgesIgnoringSafeArea(.all)
        }
    }
}
userms6l10
Related