WidgetKit blur

The iOS 14 battery widget has blur.
But if you implement them yourself in WidgetKit, you'll get 🚫 on a yellow background.
How should I implement it?
Code Block SwiftUI
struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}
struct BackgroundSunView : View {
    var body: some View {
        VisualEffectView(effect: UIBlurEffect(style: .dark))
                       .edgesIgnoringSafeArea(.all)
    }
}
struct WidgetKitEntryView : View {
    var body: some View {
        ZStack {
            BackgroundSunView()
            VStack {
                Text("Hello")
            }
        }
    }
}


Replies

You cannot use UIKit views in WidgetKit. Your widgets need to use pure SwiftUI because the timeline entries get serialized.

Did you try using the normal .blur() view modifier?
Hi, how to make the widget background to be blur like battery widget?
Also curious about this -- whenever I try to utilize any type of blur (whether a UIKit related way or a SwiftUI related way) I find that theres either no result or the widget crashes. Is this type of background blur a planned feature?

SwiftUI .blur() is not working
3rd Party Apps cannot use blurred backgrounds for their Widgets. Please file an Enhancement Request for the ability to do this.
  • Hi! Are there any changes about this?

Add a Comment
You just have to add the background color and apply the blur to it.

This still isn't available to non first party widgets which sucks. Apple, can you please add this?