UIVisualEffectView does not work in iOS 14 Widget

Question

I put on an image and it fills widget view.

And I made small view and wanted this view shows blurred imaged of behind image.

(image and small view are in the ZStack)

I used few code (something like Option 2 from Is there a method to blur a background in SwiftUI?)

but the result is like

I think that yellow box means 'VisualEffectView doesn't work in WidgetKit.'

So I wonder if there is other technique to show small view that shows blurred behind image?

Answer 1

I think that yellow box means 'VisualEffectView doesn't work in WidgetKit.'

Yes, specifically because you can't use UIViewRepresentable in Widgets. See:

• Display UIViewRepresentable in WidgetKit

It means that the only option is to use SwiftUI code. A possible solution is here (Option 1):

• Is there a method to blur a background in SwiftUI?

struct WidgetEntryView: View {
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            Image("testImage")
                .blur(radius: 10)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

Answer 2

I found some workaround

first, i put the original picture

then put a picture which applied Gaussian filter on the original picture

and add clipShape to the filtered image.

object for argument of clipShape needs to confirm Shape protocol like

struct MyShape: Shape {
  func path(in rect: CGRect) -> Path {
    RoundedRectangle(cornerRadius: 10.0).path(...)
  }
}

and I found Gaussian filter code from

https://gist.github.com/Zedd0202/8d3e567161d0c92e7d585bb74e926413#file-applyblur_usingclamp-swift

pseudo code

ZStack {
  Image("image")
  Image("image")
    .clipShape(YourShape())
    .frame(...)
    .padding(...)
}
---
extension UIImage {
  func applyBlur_usingClamp(radius: CGFloat) -> UIImage {
        let context = CIContext()
        guard let ciImage = CIImage(image: self),
              let clampFilter = CIFilter(name: "CIAffineClamp"),
              let blurFilter = CIFilter(name: "CIGaussianBlur") else {
            return self
        }
        
        clampFilter.setValue(ciImage, forKey: kCIInputImageKey)
        
        blurFilter.setValue(clampFilter.outputImage, forKey: kCIInputImageKey)
        blurFilter.setValue(radius, forKey: kCIInputRadiusKey)
        guard let output = blurFilter.outputImage,
              let cgimg = context.createCGImage(output, from: ciImage.extent) else {
            return self
        }
        return UIImage(cgImage: cgimg)
    }
}
---
struct YourShape: Shape {

    
    func path(in rect: CGRect) -> Path {
        RoundedRectangle(cornerRadius: 10.0)
            .path(in: CGRect(...))
    }
}

then you will get something like this

Update

looks like widget has kind of memory limit

if you run this code on real device it can be crashed (most time simulator works find, in my case)

you can resolve this problem through adjusting radius value of applyBlur_usingClamp method. (250 crashed, 100 is fine for me)