SwiftUI Modal Tutorial

To present modals, SwiftUI provides the special view modifier called sheet.In this tutorial a modal is presented which will include as dismiss button.SwiftUI requires Xcode 11 and MacOS Catalina, which can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project . In the template selector, select iOS as the platform, select the Single View App template, and then click Next . Enter SwiftUIModalTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next . Choose a location to save the project on your Mac.

The modal will be created form its own view. Add a new file to the project. Choose File -> New -> File and choose iOS -> User Interface -> SwiftUI View. The file will be named ModalView.swift.

Change the code inside the ModalView.swift to

struct ModalView: View {
    // 1.
    @Binding var showModal: Bool
    
    var body: some View {
        VStack {
            Text("Inside Modal View")
                .padding()
            // 2.
            Button("Dismiss") {
                self.showModal.toggle()
            }
        }
    }
}

struct ModalView_Previews: PreviewProvider {
    static var previews: some View {
        ModalView(showModal: .constant(true))
    }
}

Change the code inside the ContentView struct to

struct ContentView: View {
    
    // 1.
    @State private var showModal = false
    
    var body: some View {
      
       Button("Show Modal") {
          // 2.
          self.showModal.toggle()
       // 3.
       }.sheet(isPresented: $showModal) {
            ModalView(showModal: self.$showModal)
        }
    }
}

The source code of the SwiftUIModalTutorial can be downloaded at the ioscreator repository on Github .