Geek Culture
Published in

Geek Culture

Custom Bottom Sheet in SwiftUI

Hi Guys, In this blog you will learn how to create a Custom Bottom Sheet in SwiftUI. In the end of this blog you can get the source code link as well. Create a brand new SwiftUI project in XCode and follow along with me.

After that blog you will be able to create Custom Bottom Sheet like this:

BottomSheet View

After creating a brand new SwiftUI project, let’s create BottomSheetType firet. BottomSheetType will be an enum and, we are declaring just two cases here online and offline.

After that create a function view() inside BottomSheetType that will return a view for every case. Right now it return two views for two declared cases. OnlineBottomSheet and OfflineBottomSheet, we will create these two in a while.

After BottomSheetType, Now create a BottomSheet view, BottomSheet will be a container, we will pass the content inside it and that view will show that content like bottom sheet. BottomSheet getting two parameters.

  1. isShowing: which is control the appearance of the view
  2. content: is the view which is going to present inside the BottomSheet

Use the ZStack and alignment will be .bottom, because we need to show our view from bottom in BottomSheet. Using three modifiers outside of the ZStack.

  1. frame: for giving the height and width to the BottomSheet
  2. ignoresSafeArea(): to include the safeArea space for BottomSheet
  3. animation: for applying the animation on BottomSheet

Inside ZStack, we are using the if condition, if isShowing is true then our BottomSheet inside content view show. We are using the black color with 0.3 opacity for the background of that view and on the top of ZStack our Content view will show which we are passing into the BottomSheet.

We are using the .transition modifier to apply the transition on the content view from bottom to top. As you can see .transition(.move(edge: .bottom)). If you need any type of transition then, you can change the edge: value to change the transition.

We are not using the SwiftUI’s, background modifier to giving background color because we need to animate out background as well on appear or disappear if the BottomSheet.

ButtonLarge View

After creating BottomSheet, Create a custom button which will reuse in out Bottom Sheet Views.

Here I am creating the ButtonLarge view, which is taking four arguments.

  1. label: for button text
  2. background: for background color of the button
  3. textColor: for text color
  4. action: will use for button action

Also one constant cornorRadius. After that creating a button and giving the background color and cornorRadius to it and for button label, we are using the HStack and use the button text and giving the frame to .infinity to the HStack and also overlay the rounded rectangle for border to the button.

Rounded Cornors

For tope rounded cornors we will create the RoundedCorners Shap which is taking the cornors and radius as an input. After that we will create a custom modifier .cornorRadius which will taking cornors and radius as an input and will apply the cornorRadius to the given cornors of the views.

OnlineBottomSheet View

Now, create a view which we will pass inside the BottomSheet to present it in BottomSheet. Create OnlineBottomSheet view. Use VStack and inside it, use some texts and after that use the ButtonLarge view many times which we created earlier. As you can see the following code.

OfflineBottomSheet View

OfflineBottomSheet view is also same with OnlineBottomSheet, just some texts and colors difference but code is same.

ContentView

After creating BottomSheet and some dummy views, Now we need to present the BottomSheet in ContentView.

Create isShowingBottomSheet @State bool property which will bind with the BottomSheet. Now, use the ZStack and then create the simple Button which will toggle the property isShowingBottomSheet to show the BottomSheet. Bottom of the ZStack use the BottomSheet and bind isShowingBottomSheet with BottomSheet and pass the content by using the BottomSheetType like

BottomSheetType.online.view()

This will return the view corresponding to the .online case. For .online case, it will return the OnlineBottomSheet view as you can see the BottomSheetType enum.

BottomSheetType.offline.view()

This will return the view corresponding to the .offline case. For .offline case, it will return the OfflineBottomSheet view as you can see the BottomSheetType enum.

Now, run the code and click the button “Open Bottom Sheet”, and you will see the BottomSheet which will appear from bottom.

Hope you understand this blog. If any confusion, you can comment on this blog. Thanks for reading ….

Source Code

Patreon

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store