Chapter 18
Building an Expandable Bottom Sheet with SwiftUI Gestures and GeometryReader

Now that you should have a basic understanding of SwiftUI gestures, let's see how you can apply the technique you learned to build a feature which is commonly used in real world apps.

Bottom sheets have increased in popularity lately that you can easily find one in famous apps like Facebook and Uber. It's more like an enhanced version of action sheet that slides up from the bottom of screen and overlays on top of the original view to provide contextual information or additional options of the user's selection. For instance, when you save a photo to a collection in Instagram, the app shows you a bottom sheet to choose a collection. In the Facebook app, it displays the sheet with additonal action items when you click the ellipsis button of a post. Uber app also makes use of bottom sheets to display the pricing of your chosen trip.

The size of bottom sheets varies depending on the contextual information you want to display. In some cases, bottom sheets tend to be bigger (which is also known as backdrops) that take up 80-90% of the screen. Usually, users are allowed to interact with the sheet with the drag gesture. You can slide it up to expand its size or slide it down to minimize or dismiss the sheet.

Figure 1. Uber, Facebook and Instagram all use bottom sheets in their apps
Figure 1. Uber, Facebook and Instagram all use bottom sheets in their apps

In this chapter, we will build a similar expandable bottom sheet using SwiftUI gestures. The demo app shows a list of restaurant in the main view. When a user taps one of the restaurant records, the app brings up a bottom sheet to display the restaurant details. You can expand the sheet by sliding it up. To dismiss the sheet, you can slide it down.

Figure 2. Building a expandable bottom sheet
Figure 2. Building a expandable bottom sheet

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""