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

rmnatr OP

Jun ’20

Would love to know this as well..

1

Answer 2

flaz OP

Jul ’20

Can you try wrapping the UIVisualEffectView in a ViewRepresentable protocol and see if you can use it?

1

Answer 3

Littleor OP

Jul ’20

Yeah,I have this question,too.
Do you have any progress?
If it possible,could you tell me when you have a solution?
Thanks,
Littleor

0

Answer 4

Farkas Laura OP

Jul ’20

Jjm

0

Answer 5

harddog OP

Jul ’20

Me too

0

Answer 6

bertadevant-tk OP

Jul ’20

Would love to know the same!

0

Answer 7

timbroddin OP

Jul ’20

watching this too

0

Answer 8

DEHANG OP

Aug ’20

watching this too...

0

Answer 9

bhrrrdev OP

Aug ’20

I tried wrapping UIVisualEffectView in a ViewRepresentable protocol, but that didn't work. The widget rendered with a large yellow/red forbidden image as background.

1

Answer 10

zlata_c OP

Aug ’20

watching this too...

0

Answer 11

hellosaumil OP

Aug ’20

+1 👀

0

Answer 12

randomdev OP

Aug ’20

There is a related question https://developer.apple.com/forums/thread/653471 "Add UIKit view into iOS 14 Widget"

The reply: "UIKit views wrapped in UIViewRepresentable will not work in WidgetKit. When the views are encoded from your extension to be displayed they will appear blank. "

0

Answer 13

joon OP

Aug ’20

following but guessing this is an apple only thing that they might open up in official docs

0

Answer 14

sunyawang1990@gmail.com OP

Aug ’20

前排插眼（谁说只能英文回复？）+1

0

Answer 15

hite OP

Aug ’20

Code Block swiftvar body: some View {
        VStack{
            if self.family == .systemLarge {
                LargeEntryView()
            } else if self.family == .systemMedium {
                MediumView()
            } else {
                SmallView()
            }
        }.background(ContainerRelativeShape().fill(Color.init(.sRGB, red: 0.89, green: 0.89, blue: 0.89, opacity: 0.75)))
    }

works like charms.

0