Why Is Bottom Sheet Full Screen? What is the workaround for Dynamic Height?

Hi. Beginner here. I am looking at bottom sheet and it is frustrating that the result is always full screen. Sure, in iPad it gets displayed as a modal dialog. I wonder why they just let it behave like that in the iPhone.

The sheet should resize. based on the contents. What is your workaround for this? Should I still use sheet? or do it some other way using something else?

I looked at .presentationDetents() but i can only set a fixed height to it. My content can be either 3,4,5,6,7... lines of Text() so my goal is to make the sheet height based on the contents inside it.

Thoughts, ideas welcome.

Answered by chitgoks in 733049022

Hi. Ill paste my code below. The original post was more like a discussion question that is why I did not post any code.

Currently I set it to a fixed height

@State private var showFilter = false

var body: some View {
   VStack {
       Button {
          showFilter.toggle()
       } label : {
         Text("show me")
       }
   }
   .sheet(isPresented: $showFilter) {
      VStack {
        Text("Filter options")
          .padding([.bottom], 20)
          .presentationDetents([.height(500)])
         
        ForEach(["All", "2.5+", "3.0+", "4.0+", "5.0+", "6.0+", "7.0+", "8.0+", "9.0+"], id: \.self) { filter in
          Button {
            showFilter.toggle()
          } label: {
            Text(filter)
          }
          .padding([.top, .bottom], 8)
        }
      }
    }
}

The list may be long but I could decide to just remove 5,6,7,8,9 or vice versa that I wish to have the sheet height set based on the contents.

I will also check your suggestion.

it is frustrating that the result is always full screen.
I wonder why they just let it behave like that in the iPhone

??

Perhaps you could share your code?

I think you just have to supply it with some alternative sizes.
Try something like this:

struct BottomSheetView: View {
    
    @State private var showSettings = false
    
    var body: some View {
        Button("View Settings") {
            showSettings = true
        }
        .sheet(isPresented: $showSettings) {
            Text("Settings")
                .presentationDetents([.fraction(0.1), .medium, .large])
        }
    }
}

detents:

A set of supported detents for the sheet. If you provide more that one detent, people can drag the sheet to resize it

Read up on:

  • large
  • medium
  • custom
  • fraction
  • height
  • Context
Accepted Answer

Hi. Ill paste my code below. The original post was more like a discussion question that is why I did not post any code.

Currently I set it to a fixed height

@State private var showFilter = false

var body: some View {
   VStack {
       Button {
          showFilter.toggle()
       } label : {
         Text("show me")
       }
   }
   .sheet(isPresented: $showFilter) {
      VStack {
        Text("Filter options")
          .padding([.bottom], 20)
          .presentationDetents([.height(500)])
         
        ForEach(["All", "2.5+", "3.0+", "4.0+", "5.0+", "6.0+", "7.0+", "8.0+", "9.0+"], id: \.self) { filter in
          Button {
            showFilter.toggle()
          } label: {
            Text(filter)
          }
          .padding([.top, .bottom], 8)
        }
      }
    }
}

The list may be long but I could decide to just remove 5,6,7,8,9 or vice versa that I wish to have the sheet height set based on the contents.

I will also check your suggestion.

Why Is Bottom Sheet Full Screen? What is the workaround for Dynamic Height?
 
 
Q