CODEWITHSUNDEEP
swiftui
swiftPunk
swiftPunk

Reputation: 1

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

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.

Upvotes: 5

Views: 4625

Answers (2)

NoosaMaan
NoosaMaan

Reputation: 149

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

Upvotes: 3

davidev
davidev

Reputation: 8517

You can just use

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

on your view to blur the view.

Upvotes: 0

Related Questions