To create a screen like this from scratch

Untitled

  1. Use the background modifier on a ZStack

    Untitled

You will soon realize that this way creates a non-fillscreen background, and then you will add .edgeIgnoringSafeArea(.all); however, because now your ZStack is taking the size of fullscreen, including all the safe area. Anything you add to this ZStack, for example, a VStack to store your content will be out of your safe area. For better appearance, you need to add the padding of the height of the safe area using something such as .padding(.top, UIApplication.shared.windows.filter{$0.isKeyWindow}.first?.safeAreaInsets.top) to compensate for the area you occupy when adding the background

  1. Create a background ZStack

Untitled

  1. Adding the background modifier to a color view

You save a ZStack

You save a ZStack

Side Note

.edgeIgnoringSafeArea won't change the frame of the original view. It just make it look like the view occupies more space

Untitled