swiftlocationcard

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


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 libraryenter image description here


Solution

  • 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:

    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)
    }
    

    Screenshot