SwiftUI Tab Bar that blurs content behind it

Question

I am trying to blur the content that appears behind my tab bar at the bottom so that it has a translucent / glassmorphism effect.

This is what I am trying to achieve (from Figma):

Similar to how the tab bar in Twitter is transparent but everything that goes behind the tab bar becomes blurry.

This is the code for my Custom Tab Bar:

import SwiftUI

struct CustomTabBar: View {
    @Binding var currentTab: Tab
    
    var body: some View {
        GeometryReader{proxy in
            HStack(spacing: 0){
                ForEach(Tab.allCases,id: \.rawValue){tab in
                    Button{
                        withAnimation(.easeInOut(duration: 0.2)){
                            currentTab = tab
                        }
                    } label: {
                        Image(tab.rawValue)
                            .renderingMode(.template)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 30, height: 30)
                            .frame(maxWidth: .infinity)
                            .foregroundColor(currentTab == tab ? Color.white : Color.white.opacity(0.75))
                    }
                }
            }
            .frame(maxWidth: .infinity)
        }
        .frame(height: 30)
        .padding(.bottom, 10)
        .padding([.horizontal, .top])
        .background{
            Color.white.opacity(0.50)
                .ignoresSafeArea()
        }
    //END OF VAR BODY
    }
//END OF STRUCT
}

struct CustomTabBar_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

This is my code for the Main Tab View that is a ZStack with my different views and the custom tab bar at the bottom:

import SwiftUI

struct MainTabView: View {
    //HIDING NATIVE TAB BAR
    init(){
        UITabBar.appearance().isHidden = true
    }
    
    @State var currentTab: Tab = .dashboard
    
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
            TabView(selection: $currentTab){
                ContentView()
                    .tag(Tab.dashboard)
                Text("Analytics")
                    .applyBG()
                    .tag(Tab.analytics)
                Text("Settings")
                    .applyBG()
                    .tag(Tab.settings)
            }

            //CUSTOM TAB BAR
            CustomTabBar(currentTab: $currentTab)
        }
    //END OF VAR BODY
    }
//END OF STRUCT
}

struct MainTabView_Previews: PreviewProvider {
    static var previews: some View {
        MainTabView()
    }
}

//BACKGROUND COLOR OF EACH TAB -- CAN REMOVE ONCE YOU BUILD OUT THE VIEWS
extension View{
    func applyBG()->some View{
        self
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background{
                Color("BG")
                    .ignoresSafeArea()
            }
    }
}

I have tried using the solution from this overflow question

But when I do this it blurs the entire view behind the tab bar, not just the content behind the tab bar:

The colors are different here, but same principal applies.

Any idea how I can achieve this blurred look behind JUST the tab bar?

Answer 1

It seems like you currently have your tab bar's background to be a half-opaque white, but for blur effects, you'd want one of the materials, such as .ultraThinMaterial