Blur Views In SwiftUI

In this article, We will explore how to implement an Animated Onboarding UI View in SwiftUI

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Let's start by adding the script BlurView and simple TextView inside it

import SwiftUI

struct BlurView: View {
    
    var body: some View {
        VStack{
            Text("Mobile \nApps \nAcademy")
                .font(.system(size: 80))
                .bold()
                .foregroundStyle(.yellow)
                .onTapGesture {
                    self.isBlur.toggle()
                }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.black)
    }
}

Create a BlurModier<BlurContent: View> script and inherit it from ViewModifier.

import SwiftUI

struct BlurModifier<BlurContent: View>: ViewModifier {
    
    func body(content: Content) -> some View {
        
    }
}

Inside the body, we are setting the blur and changing it with animation

import SwiftUI

struct BlurModifier<BlurContent: View>: ViewModifier {
    
    @Binding var showBlur: Bool
    @State var blurRadius: CGFloat = 10
    
    let content: () -> BlurContent
    
    func body(content: Content) -> some View {
        Group {
            content
                .blur(radius: showBlur ? blurRadius : 0)
                .animation(.easeInOut, value: showBlur)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay {
            self.content()
                .opacity(showBlur ? 1 : 0)
                .animation(.easeInOut(duration: 0.4), value: showBlur)
        }
    }
}

Now using this modifier on a view should look like below.

import SwiftUI

struct BlurView: View {
    @State var isBlur: Bool = false
    
    var body: some View {
        VStack{
            Text("Mobile \nApps \nAcademy")
                .font(.system(size: 80))
                .bold()
                .foregroundStyle(.yellow)
                .onTapGesture {
                    self.isBlur.toggle()
                }
        }
        .modifier(BlurModifier(showBlur: $isBlur, content: {
            VStack(spacing: 10){
                Color.black.opacity(0.1)
            }
            .ignoresSafeArea()
            .onTapGesture {
                isBlur.toggle()
            }
        }))
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.black)
    }
}

That’s it, You should be able to see the blur effect

GitHub - Mobile-Apps-Academy/ComplexBlurSwiftUI

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Mobile Apps Academy

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/