VisualEffect in SwiftUI 5 & iOS 17

VisualEffect in SwiftUI 5 & iOS 17

Starting iOS 17 and SwiftUI 5, we can change the visual appearance of a view without changing its ancestors or descendants using newly introduced modifier called VisualEffect

Using visualEffect modifier is simple, we simply apply it to the view, just like other modifiers.

Let’s use this in an example, we will take two views inside a ZStack.

struct VisualEffectsExample: View {
    
    var body: some View {
        ZStack {
            Image(.DT)
                .grayscale(0.8)
                .opacity(0.2)
            Text("DevTechie.com")
                .font(.largeTitle)
                .foregroundStyle(.black)
        }
        
    }
}

What if we want to move the DevTechie.com text in this view to the bottom of the screen? For that, we will need to know the height of the view and we can get that information using GeometryReader.

struct VisualEffectsExample: View {
    
    var body: some View {
        ZStack {
            Image(.DT)
                .grayscale(0.8)
                .opacity(0.2)
            GeometryReader { geoProxy in
                Text("DevTechie.com")
                    .font(.largeTitle)…