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:

Answer 2

try using an overlay for sheet and the image like:

Image("image")
.overlay(
Image("image2")
)

this is only an example.

Answer 3

Instead of moving the image up, you can move the background down.

If you use rounded corners for the background, you'll need to cover them at the bottom.

struct ContentView: View {

    let loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    @State private var isSheetShowing = false
    var body: some View {

        Text(loremIpsum)
            .font(.title2)
            .onTapGesture {
                isSheetShowing = true
            }
            .sheet(isPresented: $isSheetShowing) {
                VStack {
                    Image(systemName: "ladybug")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 200, height: 200)
                        .padding()
                        .foregroundStyle(.black)
                        .background(.red)
                        .clipShape(RoundedRectangle(cornerRadius: 10))
                    Spacer()
                    Text("The sheet")
                    Spacer()
                }
                .presentationDetents([.medium, .large])
                .presentationBackground(alignment: .top) {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.background)
                        .padding(.top, 100)
                        .overlay(alignment: .bottom) {

                            // Hide the rounded corners at the bottom
                            Rectangle()
                                .fill(.background)
                                .frame(height: 30)
                        }
                }
            }
    }
}