Moving an image over a sheet SwiftUI

Question

In a screen design, I am showing a sheet from the bottom, and in this section I want to move an image above the sheet part. In this part, when I move it up with offset, it only remains in the sheet, but I want to do it as follows.

I want this:

Problem:

import SwiftUI

struct LoginView: View {
    @State private var showingResetPassword = false

    var body: some View {
        VStack(){
            HStack{
                Toggle("", isOn: $isToggled)
                    .toggleStyle(
                        CheckmarkToggleStyle()
                    )
                Text("Beni hatırla")
                Spacer()
                Button("Şifremi Unuttum") {
                            showingResetPassword.toggle()
                }.foregroundColor(Color.black)
                    .sheet(isPresented: $showingResetPassword) {
                            ZStack{
                                Image("resetPasswordFrog")
                                    .offset(y: -100)
                            }
                            .presentationDetents([.medium, .large])
                        }
            }.padding(.top, 10)

I used ZStack but I couldn't display it the way I wanted.

Answer 1

You can set the presentationBackground to a view with its top part being transparent, e.g. a UnevenRoundedRectangle with some padding at the top. Then you can just position the image at the top of the sheet.

The image still doesn't technically "exceed" the bounds of the sheet, but since the top part of the sheet's background is transparent, it looks as if the image is sticking out of the sheet.

Here is a simple example.

struct ContentView: View {
    @State var sheet = false
    
    var body: some View {
        Button("Show Sheet") {
            sheet = true
        }
        .sheet(isPresented: $sheet) {
            VStack {
                Image("my profile pic")
                Spacer()
            }
            .presentationBackground {
                UnevenRoundedRectangle(topLeadingRadius: 30, topTrailingRadius: 30)
                    .fill(.background)
                    .overlay(alignment: .topTrailing) {
                        // the close button
                        Button {
                            sheet = false
                        } label: {
                            Image(systemName: "xmark")
                                .tint(.gray)
                                .font(.title)
                        }
                        .padding(30)
                    }
                    .padding(.top, 50)
            }
            .presentationDetents([.medium, .large])
            // the drag indicator would still appear at the "actual"
            // top of the sheet, so we hide it
            .presentationDragIndicator(.hidden)
            // you can make your own drag indicator with shapes if needed
        }
    }
}

Output: