How can i create a same blured view by using a swiftUI and its materials (.ultraThinMaterial.regular.thickmaterial) and etc

Question

How to recreate the same blurred view then one which says McDonalds by using purely swiftUI i believe materials modifier can help me somehow but do i need to recreate it with opacity or no? I want to do it without a library

Answer 1

Even a thin material background provides a heavy blur. It also provides a lighter shade (in light mode) and darker shade (in dark mode).

If you always want the effect to be dark then you can enforce dark mode:

• the modifier .preferredColorScheme(.dark) will apply dark mode to the parent view and all child content
• to enforce dark mode on just the local view, use .environment(\.colorScheme, .dark) instead (ref. this answer).

ZStack(alignment: .bottom) {
    Image(systemName: "ladybug.fill")
        .resizable()
        .scaledToFit()
        .frame(maxWidth: .infinity)
        .padding(20)
        .background(.red)
    Text("Hello")
        .font(.largeTitle)
        .padding(50)
        .frame(maxWidth: .infinity)
        .background(.regularMaterial)
        .clipShape(RoundedRectangle(cornerRadius: 20))
        .padding(10)
        .environment(\.colorScheme, .dark)
}