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.

Haptic Feedback for the Feels - #30DaysOfSwift

How to Build a FAB-ulous Button - #30DaysOfSwift

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Bottom Sheet Tutorial in iOS 18 - #30DaysOfSwift

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Forms and Input Handling 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

Forms and Input Handling 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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps