create a blur effect on signin

Question

I have created a login page but I am trying to add a view to encapsulate the textfield and add a blur effect.

Below is the current code I have:

var body: some View {
        ZStack() {
            VStack(spacing: 16) {
                Spacer()
                VStack(spacing: 16) {
                    InputTextFieldView(text: $viewModel.credentials.email,
                                       placeholder: "Email",
                                       keyboardType: .emailAddress,
                                       sfSymbol: "envelope")
                    
                    InputPasswordView(password: $viewModel.credentials.password,
                                      placeholder: "Password",
                                      sfSymbol: "lock")
                }
                HStack {
                    Spacer()
                    Button(action: {
                        showForgotPassword.toggle()
                    }, label: {
                        Text("Forgot Password?")
                    })
                    .font(.system(size: 16, weight: .bold))
                    .sheet(isPresented: $showForgotPassword, content:{
                        ForgotPasswordView()
                    })
                }
                
                VStack(spacing: 16) {
                    ButtonView(title: "Login") {
                        viewModel.login()
                    }
                    
                    HStack {
                        Text("Need an account? ")
                        Button(action: {
                            showRegistration.toggle()
                        }, label: {
                            Text("Signup")
                        })
                        .font(.system(size: 16, weight: .bold))
                        .sheet(isPresented: $showRegistration, content:{
                            RegisterView()
                        })
                    }
                }
            }
            .padding(.horizontal, 15)
           // .frame(height: .infinity, alignment: .bottom)
        }
        .navigationTitle("SignIn")
    }

The screen look like:

But I am trying to achieve this:

Do not pay attention to the background image, I will use a Zstack to achieve this. I'm mostly looking to achieve the bottom container.

Any idea ?

plz check this link https://stackoverflow.com/questions/56610957/is-there-a-method-to-blur-a-background-in-swiftui — Chandaboy, Jul 07 '23 at 06:24

score 1 · Answer 1 · answered Jul 07 '23 at 08:56

Try to use this method using ZStack

struct BlurEffect: UIViewRepresentable {

    let style: UIBlurEffect.Style

    func makeUIBlurView(context: UIViewRepresentableContext<BlurView>) -> UIView {
        let view = UIView(frame: .zero)
        view.backgroundColor = .clear
        let blurEffect = UIBlurEffect(style: style)
        let blurView = UIVisualEffectView(effect: blurEffect)
        blurView.translatesAutoresizingMaskIntoConstraints = false
        view.insertSubview(blurView, at: 0)
        NSLayoutConstraint.activate([
            blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
            blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
        ])
        return view
    }

    func updateUIBlurView(_ uiView: UIView,
                      context: UIViewRepresentableContext<BlurView>) {

    }

}

Usage

struct ContentView: View {

    var body: some View {
        NavigationView {
            ZStack {
                List(1...100) { item in
                    Rectangle().foregroundColor(Color.pink)
                }
                .navigationBarTitle(Text("Sample text"))
                ZStack {
                    BlurEffect(style: .light)
                        .frame(width: 300, height: 300)
                    Text("Hey there, I'm on top of the blur")

                }
            }
        }
    }

}

score 0 · Answer 2 · answered Jul 07 '23 at 07:24

A simple solution would be to just use the .ultraThinMaterial colour and change the brightness for the background.

var body: some View {
        ZStack {
            Image("sampleImage")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
            Rectangle()
                .fill(.ultraThinMaterial)
                .ignoresSafeArea()
                .brightness(-0.22)
        }
    }

Image I used:

The result:

create a blur effect on signin

2 Answers2