How can I have a Blur effect as a Background in SwiftUI?

user_13899957 0
Viewed 1640

I want to have blur effect as background for my View, as we know, we can blur the view and what is inside, but I do't want blur content of view but I want blur background view to give a glassy blurred through effect as we know. How i can do this in SwiftUi?

In other words, the under layer of view would be blurred in frame on current view which sets as background for current view.

swiftui
2 Answers

In iOS 15 you can use Materials, like .ultraThinMaterial

.background(.ultraThinMaterial)

But from iOS 14 down, there is no SwiftUI way to achieve this, though it is possible to create an UIViewRepresentable and place it as a background.

Following code will create a UIViewRepresentable that you are able to use as a background: .systemUltraThinMaterial can be changed to any material

import SwiftUI
struct BlurView: UIViewRepresentable {
    var style: UIBlurEffect.Style = .systemUltraThinMaterial
    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}

View extension (optional):

extension View {
    func backgroundBlurEffect() -> some View {
        self.background(BlurView())
    }
}

Then use on a view like a pop up.

.background(BlurView())

or if used like extension

.backgroundBlurEffect()

See image

user_183610290

You can just use

.blur(radius: showCustomAlertView ? 5 : 0)//<< here comes your blur

on your view to blur the view.

user_118780690
Related