DEV Community

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

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!

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay