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: Ready to dive into the code? Here it is: 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)
            )
    } Let me know how you plan to use it in your App. Feel free to comment below if there are any doubts. Happy coding! Day 1: Stumbling across the Hidden Gold 👑 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. Fab-ulous button Here's a sneak peek of the inspiration for this sheet: Ready to dive into the code? Here it is: 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)
            )
    } @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)
            )
    } Let me know how you plan to use it in your App. Feel free to comment below if there are any doubts. Happy coding! Happy coding!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Bottom Sheet Tutorial in iOS 18 - #30DaysOfSwift

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

AVKit Integration in iOS 18 - #30DaysOfSwift

Coding with Latenode's AI + JavaScript Assistant: A Low-Code Platform for Simplified Development

Crushing Your First Open Source Contribution: The Best Tips for Beginners 🚀

How Building Projects Empowers Beginner Programmers

How to Use App Scripts to Automate in Google Sheets

Is Java the Right Choice as a First Language to Learn?

AVKit Integration in iOS 18 - #30DaysOfSwift

Coding with Latenode's AI + JavaScript Assistant: A Low-Code Platform for Simplified Development

Crushing Your First Open Source Contribution: The Best Tips for Beginners 🚀

How Building Projects Empowers Beginner Programmers

How to Use App Scripts to Automate in Google Sheets

Is Java the Right Choice as a First Language to Learn?

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps