'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 blured through effect as we know. How i can do this in SwiftUi?
In other words, the under layer of view would be blured in frame on current view which sets as background for current view.
Goal: I like to see Hello world from background blured out.
import SwiftUI
struct ContentView: View {
@State var showCustomAlertView: Bool = Bool()
@State var stringOfText: String = "Hello, world!"
var body: some View {
ZStack {
VStack {
HStack {
Button(action: {
withAnimation(.easeInOut(duration: 0.35)) { showCustomAlertView.toggle() }
print("trash info")
}) { Image(systemName: "trash") }
Spacer()
}.padding()
Spacer()
if showCustomAlertView { CustomAlertView(showCustomAlertView: $showCustomAlertView); Spacer() }
}.zIndex(1)
VStack {
ForEach (0..<16) { index in
Text(stringOfText + String(index)).bold().padding(5)
}
Button("update Text") { stringOfText = "Omid" }.padding()
Spacer()
}.padding().disabled(showCustomAlertView)
}
}
}
struct CustomAlertView: View {
@Binding var showCustomAlertView: Bool
var body: some View {
let minValueOfScreen = 375-20
ZStack {
Color.white.opacity(1.0).cornerRadius(15).shadow(color: Color.black.opacity(0.5), radius: 50, x: 0, y: 0) // : Here I like to have Blured Background
VStack {
Spacer()
Image(systemName: "trash").font(Font.system(size: 50))
Spacer()
Text("Are you Sure for deleting this File?").font(Font.title3.bold())
Spacer()
Text("You can't undo this action.")
HStack {
Button("dismiss") {
print("dismiss"); showCustomAlertView.toggle()
}.foregroundColor(Color.black).padding(.vertical, 10).padding(.horizontal, 40).background(Color(UIColor.systemGray4)).cornerRadius(10)
Spacer()
Button("Delete") {
print("Delete"); showCustomAlertView.toggle()
}.foregroundColor(Color.white).font(Font.body.bold()).padding(.vertical, 10).padding(.horizontal, 40).background(Color.blue).cornerRadius(10)
}.padding(30)
}
}.frame(width: minValueOfScreen, height: minValueOfScreen, alignment: .center)
}
}
my Goal Image:
Solution 1:[1]
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()
Solution 2:[2]
You can just use
.blur(radius: showCustomAlertView ? 5 : 0)//<< here comes your blur
on your view to blur the view.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | NoosaMaan |
| Solution 2 | davidev |