iosswiftswiftui

SwiftUI: Translucent background for fullScreenCover


So technically I want to show a loading screen view. I'm using fullScreenCover.

struct ContentView: View {
    
    @State private var isLoading = false
        
    var body: some View {
        VStack {
            Text("Hello there")
            Button("Start loading") {
                isLoading.toggle()
            }
            .fullScreenCover(isPresented: $isLoading) {
                ZStack{
                    Color.black.opacity(0.5).edgesIgnoringSafeArea(.all)
                    VStack {
                        ProgressView()
                        Button("Stop loading") {
                            isLoading.toggle()
                        }
                    }
                }
            }
        }
    }
}

The problem is that I cannot make this loading screen translucent. sheet or popover behave the same way.


Solution

  • Here is a demo of possible way. Parameters of visual effect you can tune for your needs.

    Tested with Xcode 12 / iOS 14.

           // ... other code
                .fullScreenCover(isPresented: $isLoading) {
                    ZStack{
                        Color.black.opacity(0.5).edgesIgnoringSafeArea(.all)
                        VStack {
                            ProgressView()
                            Button("Stop loading") {
                                isLoading.toggle()
                            }
                        }
                    }
                    .background(BackgroundBlurView())
                }
            }
        }
    }
    
    struct BackgroundBlurView: UIViewRepresentable {
        func makeUIView(context: Context) -> UIView {
            let view = UIVisualEffectView(effect: UIBlurEffect(style: .light))
            DispatchQueue.main.async {
                view.superview?.superview?.backgroundColor = .clear
            }
            return view
        }
    
        func updateUIView(_ uiView: UIView, context: Context) {}
    }