SwiftUI sheet in half screen, full screen, custom size and position

In this SwiftUI tutorial, we’ll be learning how to create a half-screen sheet in SwiftUI. It’s quite easy to implement the sheet (Also called as Modal) in SwiftUI all we have to do is call the sheet method of SwiftUI and it will present the sheet to the current controller.

The sheet method takes a boolean variable as a parameter and it will present the sheet whenever the binding variable value is true.

Sheet in Half Screen

Let’s see how we implement the sheet in SwiftUI.

struct ContentView: View {
    @State private var showSheet:Bool = false
  
    var body: some View{
   
     Button("Show Sheet"){
            showSheet.toggle()
        }
    }
}

Currently, the main view, ContentView of the app just contains a button and a state variable showSheet.

The value of showSheet changes whenever the user taps on the button.

Now, we’ll call the sheet method and bind it with the state variable showSheet. So that whenever the user taps on the button the value of the binding variable showSheet will be changed and the sheet method will present the sheet.

struct ContentView: View {
    @State private var showSheet:Bool = false
  
    var body: some View{
        Button("Show Sheet"){
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet){
          
                 Text("SwiftUI Sheet - medium")
                .presentationDetents([.medium])
         }   
    }
}

• .presentationDetents modifier handles the size of the sheet. It accepts an array so we can provide multiple values to which our sheet can be resized.
• .medium will make the sheet size equal to half of the screen size.

Sheet in Full Screen

For presenting the sheet over the full screen, we’ll have to change the .presentationDetents modifier value from medium to large and it will present the sheet over the full screen.

struct ContentView: View {
    @State private var showSheet:Bool = false
  
    var body: some View{
        Button("Show Sheet"){
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet){
            
            Text("SwiftUI Sheet - Large")
               .presentationDetents([.large])
       }
   }
}

Sheet with custom height

Instead of using .medium and .large values, we can also provide the sheet with our own custom height.

struct ContentView: View {
    @State private var showSheet:Bool = false
  
    var body: some View{
        Button("Show Sheet"){
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet){
            
            Text("SwiftUI Sheet - Custom Height")
               .presentationDetents([.height(100)])
     
     }
  }
}

Resizable sheet with multiple positions

As the .presentationDetents modifier accepts an array, we can provide the sheet with multiple values of positions and the user will be able to resize the sheet to all the given positions.

struct ContentView: View {
    @State private var showSheet:Bool = false
  
    var body: some View{
        Button("Show Sheet"){
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet){
            
            Text("SwiftUI Sheet - Multiple position")
               .presentationDetents([.large,.medium,.height(100)])
         
          }
       }
    }