How do I use containerRelative on a grid in my widget?

Question

Created 3w

Replies 1

Boosts 0

Participants 2

I want to display a grid of items in my widget similar to the systemLarge Shortcuts app widget. I use clipShape(.containerRelative) to get the widget corner radius, but items that do not touch a corner in any way do not get this treatment. This is even worse with the extra large widget. How can I apply the corner radius of the widget minus the padding across all items? It does not seem like the radius is exposed outside of that special shape.

Bildschirmfoto 2025-08-13 um 23.18.17.png

Boost

Answer 1

frncg OP

3w

I took a stab at trying to fix this problem to no avail. It seems that ContainerRelativeShape also takes into account the distance from the edges of the container even if you move the shape using .offset().

For now, what I think is a good idea is to just hardcode the corner radius and calculate the concentric radius accordingly

For iOS 18 and below, the corner radius I use is 21.0 and for iOS 26, it's 28.0.

var widgetRadius: {
    if #available(iOS 26.0, *) {
        28
    } else {
        21
    }
}

let padding = 10
let concentricRadius = widgetRadius - padding

RoundedRectangle(cornerRadius: concentricRadius)

Not the prettiest implementation but it should do for now. iOS 26 has some new concentric rectangle features you could take a look at, but I personally have yet to study them.

1