WidgetKit background like the system battery widget

Question

Created Jun ’20

Replies 19

Boosts 0

Views 7.3k

Participants 19

Hello, is it possible to configure our widgets with a background like the inbuilt system battery widget?

It looks like it's using a UIVisualEffectView as it's background which looks fantastic against the user's background. Especially as it transitions for dark mode.

I've been through all the docs and designing for WidgetKit but can't figure out how to have anything but a fully opaque background.

Setting the background to transparent on my SwiftUI view results in white showing as the background.

Thanks,

Greg

Boost

Answer 1

hite OP

Aug ’20

@hite
I am wrong。

Code Block background(ContainerRelativeShape().fill(Color.init(.sRGB, red: 0.89, green: 0.89, blue: 0.89, opacity: 0.75)))

doesn`t work

0

Answer 2

wongfrompalmyrau OP

Sep ’20

Same issue here

0

Answer 3

ToBro114 OP

Sep ’20

Watching this too

0

Answer 4

a3igner OP

Dec ’20

I ran into this problem too. If you set your padding at the top or bottom too small you see the white canvas of the widget show through. I use a view background of black for instance (using below .background attached to the greatest View).

I also noticed that the Preview in Xcode and the actualy rendered widget in the Simulator are not exactly the same.
One can see the corners show up in the Preview but in the simulator they are gone.

I think probably the only way around this is to use a padding sufficient enough to overlap those 'gaps'. which is messy. and probably a reason why Apple has some 'design' recommendations including a padding of 15px.

EDIT:

I just found the way to do it.

You need to include

Code Block Spacer()

in the VStack to stretch to max size of canvas and similarly for the HStack if you are having gaps.

This solved it for me...

0