iosswiftswiftuipopover

SwiftUI Popover background with Material


I'm trying to create a SwiftUI Popover with a translucent material(regular, thin, or ultra-thin) background. To show up some vibrancy of the content behind the Popover content.

I tried adding ultraThin and other material types to the background view. they don't have any effect on the popover background. Also tried creating a UIViewRepresentable by creating a visual effect view. Still, there's no effect on the popover background.

   .popover(isPresented: $showPopover) {
                            ZStack {
                                Text("My popover content")
                                    .font(.title)
                            }
                            .frame(width: 250, height: 350, alignment: .center)
                            .background(.ultraThinMaterial)
                        }

Solution

  • iOS 16.4+

    iOS 16.4 introduced a new .presentationBackground() modifier that can be used to set a background material to a popover or a modal presented view. Just pass the material you want to use as a parameter.

    .popover(isPresented: $showPopover) {
        Text("Hello, World!")
            .presentationBackground(.regularMaterial)
    }
    

    Make sure to use the presentationBakcground() modifier inside the .sheet() or .popover() closure. More documentation here.

    Older versions

    Popovers are by default translucent on iPadOS and macOS. On iOS, popovers are presented in the form of a modal view.

    The .background(.ultraThinMaterial) is applied directly on your ZStack view but not on the popover/modal view itself. Using UIViewRepresentable or UIViewControllerRepresentable will only wrap your UIView/UIViewController inside a View and will still have no effect on the popover/modal.

    At that time (SwiftUI 4, Xcode 14.2), it is not possible to change the background material of a popover/modal view using SwiftUI.