DEV Community

Cover image for Bottom Sheet Tutorial in iOS - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on • Edited on

Bottom Sheet Tutorial in iOS - #30DaysOfSwift

Day 1: Stumbling across the Hidden Gold 👑

In the second post of #30DaysOfSwift series, you will learn how to add a bottom sheet.

With a Fab-ulous button to toggle the sheet, you can show your content inside it.

Here's a sneak peek of the inspiration for this sheet:

Image description

Ready to dive into the code? Here it is:

Image description

Or you can just copy it from here:

@State var shouldPresentSheet = false

    var body: some View {
        VStack {
          // ...
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(
                VStack {
                    Spacer() // Pushes the button to the bottom
                    HStack {
                        Spacer() // Pushes the button to the right
                        Button(action: {
                            shouldPresentSheet.toggle() // Toggles sheet On/Off
                        }) {
                            Image(systemName: "plus")
                                .foregroundColor(.white)
                                .padding()
                                .background(Color(.orange))
                                .clipShape(Circle())
                                .shadow(color: Color(.gray), radius: 2.5)
                        }
                        .sheet(isPresented: $shouldPresentSheet) {
                            print("Sheet dismissed!")
                        } content: {
                            Text("In the sheets!")
                        }
                        .padding()
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            )
    }
Enter fullscreen mode Exit fullscreen mode

Let me know how you plan to use it in your App. Feel free to comment below if there are any doubts.

Happy coding!

Top comments (0)